js實現滑動滑塊驗證登入
阿新 • • 發佈:2020-07-25
本文例項為大家分享了js實現滑動滑塊驗證登入的具體程式碼,供大家參考,具體內容如下
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樣式
最大的盒子相對定位,其他內部內容絕對定位
需要根據層級設定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.事件狀態:event物件(滑鼠位置)event.clientX獲得與X軸的距離
3.鬆開按鈕回到原處
4.結束,鬆開按鈕,按鈕不可再次拖動
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軸距離減去初始值距離得到按鈕移動的值
根據移動的值:判斷按鈕是否可以正常移動,判斷按鈕是否已經完成驗證
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)){//包含原始寬度內邊距邊框,不包含外邊框 //拖到頭,驗證成功 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事件狀態 // 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)){//包含原始寬度內邊距邊框,不包含外邊框 //拖到頭,驗證成功 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;//背景 } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。