js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄
本文實(shí)例為大家分享了js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄的具體代碼,供大家參考,具體內(nèi)容如下
1.html代碼
<div class="box"> <!--滑塊--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class="text">拖動(dòng)滑塊驗(yàn)證</p> <!--背景--> <div class="bg"></div> </div>
2.css樣式
最大的盒子相對(duì)定位,其他內(nèi)部?jī)?nèi)容絕對(duì)定位
需要根據(jù)層級(jí)設(shè)置z-index保證滑動(dòng)的正常使用
.box{ position: relative; width: 300px; height: 34px; background: #e8e8e8; border-radius: 4px; left: 20px; } .btn{ position: absolute; top: 0; width: 40px; height:32px; text-align: center; line-height: 32px; border-radius: 4px; z-index: 3; background-color: #fff; border: 1px solid #ccc; color: black; } .text{ position: absolute; width: 100%; margin: 0; text-align: center; line-height: 34px; display: block; z-index: 2; /*-webkit-margin-before: 1em; -webkit-margin-after: 1em;*/ } .bg{ position: absolute; height: 100%; background-color: yellowgreen; z-index: 1; }
樣式
3.js事件
分析使用過程:按住滑塊并拖動(dòng)可以移動(dòng),中途松開滑塊返回起始位置,拖動(dòng)至最后滑塊不動(dòng)
分析動(dòng)作:
1.按鈕按下并移動(dòng)
2.事件狀態(tài):event對(duì)象(鼠標(biāo)位置)event.clientX獲得與X軸的距離
3.松開按鈕回到原處
4.結(jié)束,松開按鈕,按鈕不可再次拖動(dòng)
1)
var btn=document.querySelector(".btn"); var box=document.querySelector(".box"); var bg=document.querySelector(".bg"); var text=document.querySelector(".text");
或者使用封裝選擇器
function $(name){ return document.querySelector(name); }; var box=$(".box"),btn=$(".btn").....;
2)按下
按下后獲得與x軸的距離
btn.onmousedown=function(e){ var downX=e.clientX;
3)拖動(dòng)
拖動(dòng)后獲得與x軸距離減去初始值距離得到按鈕移動(dòng)的值
根據(jù)移動(dòng)的值:判斷按鈕是否可以正常移動(dòng),判斷按鈕是否已經(jīng)完成驗(yàn)證
btn.onmousemove=function(e){ var moveX=e.clientX-downX; // console.log(moveX); //移動(dòng)范圍 if(moveX>-2){ this.style.left=moveX+"px";//將移動(dòng)值賦值給滑塊 bg.style.width=moveX+"px";//背景 if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始寬度內(nèi)邊距邊框,不包含外邊框 //拖到頭,驗(yàn)證成功 flag=true; text.innerHTML="驗(yàn)證成功"; text.style.color="white"; //事件清除 btn.onmousedown=null; btn.onmousemove=null; } }
4)松開按鈕
回到原處清除拖動(dòng)
btn.onmouseup=function(){ //事件清除 btn.onmousemove=null; if(flag)return; this.style.left=0;//將移動(dòng)值賦值給滑塊 bg.style.width=0;//背景 }
4.效果
5.源碼
//原生寫法 window.onload=function(){ var btn=document.querySelector(".btn"); var box=document.querySelector(".box"); var bg=document.querySelector(".bg"); var text=document.querySelector(".text"); //封裝選擇器 // function $(name){ // return document.querySelector(name); // }; // var box=$(".box"),btn=$(".btn").....; var flag=false; //按下onmousedown 拖動(dòng)onmousemove //document.querySelector(".btn").onmousedown=function(event){//event事件狀態(tài) // var e=event||window.event; //獲取方法集合,可直接通過id, 類, 類型, 屬性, 屬性值等來選取元素(返回此名字的第一個(gè))。 btn.onmousedown=function(e){//按下 var downX=e.clientX; //按下后對(duì)x軸的距離 // console.log(downX); // alert("1"); btn.onmousemove=function(e){//拖動(dòng) var moveX=e.clientX-downX; //拖動(dòng)后與x軸距離減去初始值距離,移動(dòng)值 // console.log(moveX); //移動(dòng)范圍 if(moveX>-2){ this.style.left=moveX+"px";//將移動(dòng)值賦值給滑塊 bg.style.width=moveX+"px";//背景 if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始寬度內(nèi)邊距邊框,不包含外邊框 //拖到頭,驗(yàn)證成功 flag=true; text.innerHTML="驗(yàn)證成功"; text.style.color="white"; //事件清除 btn.onmousedown=null; btn.onmousemove=null; } } } } //松開按鈕 btn.onmouseup=function(){ //事件清除 btn.onmousemove=null; if(flag)return; this.style.left=0;//將移動(dòng)值賦值給滑塊 bg.style.width=0;//背景 } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標(biāo)簽切換等)
這篇文章主要為大家詳細(xì)介紹了Bootstrap 最常用的JS插件,包括圖片輪播carousel.js、標(biāo)簽切換tab.js、滾動(dòng)監(jiān)聽scrollspy.js等,感興趣的小伙伴們可以參考一下2016-07-07用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)
用js實(shí)現(xiàn)的一個(gè)根據(jù)內(nèi)容自動(dòng)生成表格的函數(shù)...2007-08-08JavaScript 中的 this 簡(jiǎn)單規(guī)則
想要確定this里規(guī)則是什么,其實(shí)方法很簡(jiǎn)單,通過檢查它的調(diào)用位置,在函數(shù)被調(diào)用的時(shí)候確定this,下面就跟隨腳本之家小編一起通過本文學(xué)習(xí)吧2017-09-09小程序分頁(yè)實(shí)踐之編寫可復(fù)用分頁(yè)組件
這篇文章主要介紹了小程序分頁(yè)實(shí)踐之編寫可復(fù)用分頁(yè)組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07JavaScript超詳細(xì)實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖
這篇文章主要介紹了JavaScript超詳細(xì)實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖,我們經(jīng)常會(huì)看到各種輪播圖的效果,它們到底是怎樣實(shí)現(xiàn)的呢?今天我們就一起來看一下具體實(shí)現(xiàn)方法吧2021-12-12在線一元二次方程計(jì)算器實(shí)例(方程計(jì)算器在線計(jì)算)
在線一元二次方程式計(jì)算器實(shí)例分享,大家參考使用吧2013-12-12javascript 獲取頁(yè)面的高度及滾動(dòng)條的位置的代碼
javascript獲取頁(yè)面的高度及滾動(dòng)條的位置的代碼,需要的朋友可以參考下。2010-05-05