原生JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)功能
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)拖動(dòng)校驗(yàn)的具體代碼,供大家參考,具體內(nèi)容如下
思路
1、頁面布局采用定位,背景顏色變化bg的寬度為0,其寬度會(huì)隨著滑塊的移動(dòng)而移動(dòng)。
頁面結(jié)構(gòu)
<!--驗(yàn)證--> <div class="box"> <!--滑塊--> <div class="btn"></div> <!--文字--> <p class="text">請(qǐng)滑動(dòng)滑塊</p> <!--背景--> <div class="bg"></div> </div>
頁面布局
/* 滑塊使用定位,背景沒有設(shè)置寬度*/ .box { width: 250px; height: 50px; background-color: #ccc; position: relative; margin: 0 auto; } .btn { box-sizing: border-box; width: 50px; height: 50px; border: 1px solid #ccc; color: #ccc; background-color: #fff; position: absolute; left: 0; top: 0; cursor: pointer; z-index: 4; } .text { position: absolute; height: 50px; left: 50%; transform: translateX(-50%); z-index: 2; user-select: none; } .bg { width: 0; height: 50px; background-color: #25c20f; z-index: 3; position: absolute; top: 0; left: 0; }
2、分析事件—鼠標(biāo)按下,鼠標(biāo)移動(dòng),鼠標(biāo)松開
2.1 鼠標(biāo)按下,獲取此時(shí)事件的水平距離downX;鼠標(biāo)移動(dòng),獲取此時(shí)事件的水平距離e.clientX;那么鼠標(biāo)移動(dòng)的距離moveX = e.clientX - downX,也就是滑塊跟著移動(dòng)的距離。即btn.style.left = moveX + 'px';同時(shí)bg的寬度也就是滑塊移動(dòng)的距離,即bg.style.width = moveX + 'px'
2.2 滑塊拉到頭了,表示驗(yàn)證成功
什么時(shí)候表示滑塊滑到頭了,也就是moveX等于box的寬度-滑塊的寬度。那么文字的改變成“驗(yàn)證成功”。且滑塊停留在了最有端。無論鼠標(biāo)點(diǎn)擊還是移動(dòng),都不會(huì)在影響了。那就是清除事件,清除按鈕的鼠標(biāo)移動(dòng)和鼠標(biāo)按下事件btn.onmousemove = null; btn.onmousedown = null;//清除事件
此時(shí)驗(yàn)證成功,設(shè)立一個(gè)標(biāo)記為表示驗(yàn)證成功flag=true,后續(xù)需要用到。
2.3 那么如果我們滑塊拉到一半就松開了鼠標(biāo),滑塊應(yīng)該回到原始位置。但是如果已經(jīng)驗(yàn)證成功了,那就不會(huì)回到原點(diǎn)。
鼠標(biāo)松開事件觸發(fā),那么鼠標(biāo)移動(dòng)已經(jīng)不能影響滑塊了,那么此時(shí)需要清除移動(dòng)事件btn.onmousemove = null;沒有驗(yàn)證成功那就回到原點(diǎn)this.style.left = 0; bg.style.width = 0;
頁面動(dòng)作
function selector(name) { return document.querySelector(name); } var box = selector('.box'), btn = selector('.btn'), text = selector('.text'), bg = selector('.bg'), flag = false; // 鼠標(biāo)按下,移動(dòng),松開 // 按下的距離和移動(dòng)的距離差就是滑塊移動(dòng)的距離 btn.onmousedown = function (e) {//按鈕按下的 var downX = e.clientX btn.onmousemove = function(e){//e 事件的狀態(tài) var moveX = e.clientX - downX; if(moveX > 0) { this.style.left = moveX + 'px'; bg.style.width = moveX + 'px' // 滑塊拉到頭了,表示驗(yàn)證成功 if (moveX >= box.offsetWidth - this.offsetWidth) { bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時(shí)候,bg將文字覆蓋了。驗(yàn)證成功后,有讓文字顯示出來 text.innerText = '驗(yàn)證成功'; text.style.color = '#fff'; flag = true; // 此時(shí)鼠標(biāo)移動(dòng)或者按下,滑塊不在跟著移動(dòng)了 btn.onmousemove = null;// btn.onmousedown = null;//清除事件 } } } } btn.onmouseup = function () { btn.onmousemove = null; // 如果驗(yàn)證成功了,那就不會(huì)回到原點(diǎn) if(flag){ return ; } this.style.left = 0; bg.style.width = 0; }
完整可以運(yùn)行的源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 滑塊使用定位,背景沒有設(shè)置寬度*/ .box { width: 250px; height: 50px; background-color: #ccc; position: relative; margin: 0 auto; } .btn { box-sizing: border-box; width: 50px; height: 50px; border: 1px solid #ccc; color: #ccc; background-color: #fff; position: absolute; left: 0; top: 0; cursor: pointer; z-index: 4; } .text { position: absolute; height: 50px; left: 50%; transform: translateX(-50%); z-index: 2; user-select: none; } .bg { width: 0; height: 50px; background-color: #25c20f; z-index: 3; position: absolute; top: 0; left: 0; } </style> </head> <body> <!--驗(yàn)證--> <div class="box"> <!--滑塊--> <div class="btn"></div> <!--文字--> <p class="text">請(qǐng)滑動(dòng)滑塊</p> <!--背景--> <div class="bg"></div> </div> <script> function selector(name) { return document.querySelector(name); } var box = selector('.box'), btn = selector('.btn'), text = selector('.text'), bg = selector('.bg'), flag = false; // 鼠標(biāo)按下,移動(dòng),松開 // 按下的距離和移動(dòng)的距離差就是滑塊移動(dòng)的距離 btn.onmousedown = function (e) {//按鈕按下的 var downX = e.clientX btn.onmousemove = function(e){//e 事件的狀態(tài) var moveX = e.clientX - downX; if(moveX > 0) { this.style.left = moveX + 'px'; bg.style.width = moveX + 'px' // 滑塊拉到頭了,表示驗(yàn)證成功 if (moveX >= box.offsetWidth - this.offsetWidth) { bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時(shí)候,bg將文字覆蓋了。驗(yàn)證成功后,有讓文字顯示出來 text.innerText = '驗(yàn)證成功'; text.style.color = '#fff'; flag = true; // 此時(shí)鼠標(biāo)移動(dòng)或者按下,滑塊不在跟著移動(dòng)了 btn.onmousemove = null;// btn.onmousedown = null;//清除事件 } } } } btn.onmouseup = function () { btn.onmousemove = null; // 如果驗(yàn)證成功了,那就不會(huì)回到原點(diǎn) if(flag){ return ; } this.style.left = 0; bg.style.width = 0; } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式完整實(shí)例
這篇文章主要介紹了JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式,以一個(gè)完整實(shí)例形式詳細(xì)分析了JS訂閱者和發(fā)布者模式基本實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02JS使用鏈?zhǔn)綄傩员磉_(dá)式取值和賦值的實(shí)現(xiàn)方法
這篇文章主要給大家詳細(xì)介紹了JS如何使用鏈?zhǔn)綄傩员磉_(dá)式取值和賦值,文章通過代碼示例介紹的非常詳細(xì),對(duì)我們的學(xué)習(xí)或工作有一定的幫助,感興趣的同學(xué)可以參考一下2023-08-08JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果
這篇文章主要為大家詳細(xì)介紹了JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07JavaScript的String字符串對(duì)象常用操作總結(jié)
String對(duì)象用于存儲(chǔ)字符串?dāng)?shù)據(jù),這里我們做了JavaScript的String字符串對(duì)象常用操作總結(jié),需要的朋友可以參考下2016-05-05