js實現(xiàn)滑動滑塊驗證登錄
本文實例為大家分享了js實現(xiàn)滑動滑塊驗證登錄的具體代碼,供大家參考,具體內(nèi)容如下
1.html代碼
<div class="box"> <!--滑塊--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class="text">拖動滑塊驗證</p> <!--背景--> <div class="bg"></div> </div>
2.css樣式
最大的盒子相對定位,其他內(nèi)部內(nèi)容絕對定位
需要根據(jù)層級設(shè)置z-index保證滑動的正常使用
.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事件
分析使用過程:按住滑塊并拖動可以移動,中途松開滑塊返回起始位置,拖動至最后滑塊不動
分析動作:
1.按鈕按下并移動
2.事件狀態(tài):event對象(鼠標位置)event.clientX獲得與X軸的距離
3.松開按鈕回到原處
4.結(jié)束,松開按鈕,按鈕不可再次拖動
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)拖動
拖動后獲得與x軸距離減去初始值距離得到按鈕移動的值
根據(jù)移動的值:判斷按鈕是否可以正常移動,判斷按鈕是否已經(jīng)完成驗證
btn.onmousemove=function(e){ var moveX=e.clientX-downX; // console.log(moveX); //移動范圍 if(moveX>-2){ this.style.left=moveX+"px";//將移動值賦值給滑塊 bg.style.width=moveX+"px";//背景 if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始寬度內(nèi)邊距邊框,不包含外邊框 //拖到頭,驗證成功 flag=true; text.innerHTML="驗證成功"; text.style.color="white"; //事件清除 btn.onmousedown=null; btn.onmousemove=null; } }
4)松開按鈕
回到原處清除拖動
btn.onmouseup=function(){ //事件清除 btn.onmousemove=null; if(flag)return; this.style.left=0;//將移動值賦值給滑塊 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 拖動onmousemove //document.querySelector(".btn").onmousedown=function(event){//event事件狀態(tài) // var e=event||window.event; //獲取方法集合,可直接通過id, 類, 類型, 屬性, 屬性值等來選取元素(返回此名字的第一個)。 btn.onmousedown=function(e){//按下 var downX=e.clientX; //按下后對x軸的距離 // console.log(downX); // alert("1"); btn.onmousemove=function(e){//拖動 var moveX=e.clientX-downX; //拖動后與x軸距離減去初始值距離,移動值 // console.log(moveX); //移動范圍 if(moveX>-2){ this.style.left=moveX+"px";//將移動值賦值給滑塊 bg.style.width=moveX+"px";//背景 if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始寬度內(nèi)邊距邊框,不包含外邊框 //拖到頭,驗證成功 flag=true; text.innerHTML="驗證成功"; text.style.color="white"; //事件清除 btn.onmousedown=null; btn.onmousemove=null; } } } } //松開按鈕 btn.onmouseup=function(){ //事件清除 btn.onmousemove=null; if(flag)return; this.style.left=0;//將移動值賦值給滑塊 bg.style.width=0;//背景 } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標簽切換等)
這篇文章主要為大家詳細介紹了Bootstrap 最常用的JS插件,包括圖片輪播carousel.js、標簽切換tab.js、滾動監(jiān)聽scrollspy.js等,感興趣的小伙伴們可以參考一下2016-07-07用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)
用js實現(xiàn)的一個根據(jù)內(nèi)容自動生成表格的函數(shù)...2007-08-08JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖
這篇文章主要介紹了JavaScript超詳細實現(xiàn)網(wǎng)頁輪播圖,我們經(jīng)常會看到各種輪播圖的效果,它們到底是怎樣實現(xiàn)的呢?今天我們就一起來看一下具體實現(xiàn)方法吧2021-12-12