> 拖動(dòng)..."/>
您好,登錄后才能下訂單哦!
這篇文章主要講解了js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
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事件
分析使用過(guò)程:按住滑塊并拖動(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; //獲取方法集合,可直接通過(guò)id, 類, 類型, 屬性, 屬性值等來(lái)選取元素(返回此名字的第一個(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;//背景 } }
看完上述內(nèi)容,是不是對(duì)js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。