原生JavaScript實現(xiàn)拖動校驗功能
本文實例為大家分享了JavaScript實現(xiàn)拖動校驗的具體代碼,供大家參考,具體內(nèi)容如下
思路
1、頁面布局采用定位,背景顏色變化bg的寬度為0,其寬度會隨著滑塊的移動而移動。
頁面結(jié)構(gòu)
<!--驗證--> <div class="box"> <!--滑塊--> <div class="btn"></div> <!--文字--> <p class="text">請滑動滑塊</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、分析事件—鼠標按下,鼠標移動,鼠標松開
2.1 鼠標按下,獲取此時事件的水平距離downX;鼠標移動,獲取此時事件的水平距離e.clientX;那么鼠標移動的距離moveX = e.clientX - downX,也就是滑塊跟著移動的距離。即btn.style.left = moveX + 'px';同時bg的寬度也就是滑塊移動的距離,即bg.style.width = moveX + 'px'
2.2 滑塊拉到頭了,表示驗證成功
什么時候表示滑塊滑到頭了,也就是moveX等于box的寬度-滑塊的寬度。那么文字的改變成“驗證成功”。且滑塊停留在了最有端。無論鼠標點擊還是移動,都不會在影響了。那就是清除事件,清除按鈕的鼠標移動和鼠標按下事件btn.onmousemove = null; btn.onmousedown = null;//清除事件
此時驗證成功,設(shè)立一個標記為表示驗證成功flag=true,后續(xù)需要用到。
2.3 那么如果我們滑塊拉到一半就松開了鼠標,滑塊應(yīng)該回到原始位置。但是如果已經(jīng)驗證成功了,那就不會回到原點。
鼠標松開事件觸發(fā),那么鼠標移動已經(jīng)不能影響滑塊了,那么此時需要清除移動事件btn.onmousemove = null;沒有驗證成功那就回到原點this.style.left = 0; bg.style.width = 0;
頁面動作
function selector(name) { return document.querySelector(name); } var box = selector('.box'), btn = selector('.btn'), text = selector('.text'), bg = selector('.bg'), flag = false; // 鼠標按下,移動,松開 // 按下的距離和移動的距離差就是滑塊移動的距離 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' // 滑塊拉到頭了,表示驗證成功 if (moveX >= box.offsetWidth - this.offsetWidth) { bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時候,bg將文字覆蓋了。驗證成功后,有讓文字顯示出來 text.innerText = '驗證成功'; text.style.color = '#fff'; flag = true; // 此時鼠標移動或者按下,滑塊不在跟著移動了 btn.onmousemove = null;// btn.onmousedown = null;//清除事件 } } } } btn.onmouseup = function () { btn.onmousemove = null; // 如果驗證成功了,那就不會回到原點 if(flag){ return ; } this.style.left = 0; bg.style.width = 0; }
完整可以運行的源碼
<!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> <!--驗證--> <div class="box"> <!--滑塊--> <div class="btn"></div> <!--文字--> <p class="text">請滑動滑塊</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; // 鼠標按下,移動,松開 // 按下的距離和移動的距離差就是滑塊移動的距離 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' // 滑塊拉到頭了,表示驗證成功 if (moveX >= box.offsetWidth - this.offsetWidth) { bg.style.zIndex = 1;// 設(shè)置bg的z-index的值是為了處理黨滑塊經(jīng)過原始值的時候,bg將文字覆蓋了。驗證成功后,有讓文字顯示出來 text.innerText = '驗證成功'; text.style.color = '#fff'; flag = true; // 此時鼠標移動或者按下,滑塊不在跟著移動了 btn.onmousemove = null;// btn.onmousedown = null;//清除事件 } } } } btn.onmouseup = function () { btn.onmousemove = null; // 如果驗證成功了,那就不會回到原點 if(flag){ return ; } this.style.left = 0; bg.style.width = 0; } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript的String字符串對象常用操作總結(jié)
String對象用于存儲字符串數(shù)據(jù),這里我們做了JavaScript的String字符串對象常用操作總結(jié),需要的朋友可以參考下2016-05-05