JS實現(xiàn)拖動滑塊驗證
使用這種驗證方法的目的:證明當前的用戶不是機器人~防止惡意操作。
實現(xiàn)思路:
1、獲取silde滑塊(獲取元素)
2、為元素注冊事件———鼠標點擊事件(onmousedown)鼠標點擊之后獲得當前鼠標的X坐標。
3、如何獲取到鼠標的x坐標——使用clientX事件(當事件被觸發(fā)時,鼠標指針的水平坐標)。
4、鼠標移動事件發(fā)生后根據(jù)從最開始點擊的X值到移動后的X值之差,作為滑塊移動的差值———— 鼠標移動事件 (onmousemove);
5、獲取鼠標移動之后的X坐標
6、獲得初始X坐標和移動后X值
7、該變 left的值
8、綠色背景跟著小滑塊走
9、鼠標抬起清除鼠標移動事件。
注意:哪怕鼠標移動的時候超出了最外面的方塊區(qū)域,滑塊也要可以移動。所以不能只在滑塊上設置移動事件,需要在文檔document上設置移動事件。
主要用到的事件:
1、鼠標點擊事件onmousedown;
2、鼠標移動事件onmousemove;
3、獲取鼠標指針X坐標 clientX;
4、鼠標按鍵被松開 onmouseup;(有點類似與 click點擊)
注意:
1、作用域——— 一個函數(shù)擁有一個作用域 (局部作用域)
2、怎樣才能實現(xiàn)鼠標移動的時候使滑塊也移動:改變滑塊的left值。
3、想要實現(xiàn)滑塊跟隨鼠標移動,就要獲得鼠標移動的x坐標。
實現(xiàn)代碼:
<!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>Document</title> ? ? <style> ? ? *{ ? ? ? ? padding:0; ? ? ? ? margin:0; ? ? } ? ? body{ ? ? ? ? user-select:none; ? ? ? ? /*禁止用戶選中*/ ? ? } ? ? .wrap{ ? ? ? ? width:300px; ? ? ? ? height: 40px; ? ? ? ? background-color:#e8e8e8; ? ? ? ? margin:100px auto; ? ? ? ? text-align: center; ? ? ? ? line-height: 40px; ? ? ? ? /*border-radius: 7px;*/ ? ? ? ? position:relative; ? ? } ? ? .rect{ ? ? ? ? position:relative; ? ? ? ? width:300px; ? ? ? ? height:100%; ? ? } ? ? .rec{ ? ? ? ? position:absolute; ? ? ? ? top:0; ? ? ? ? left:0; ? ? ? ? width:0; ? ? ? ? height:100%; ? ? ? ? background: #00b894; ? ? } ? ? .silde{ ? ? ? ? position:absolute; ? ? ? ? top:0; ? ? ? ? left:0; ? ? ? ? z-index: 11; ? ? ? ? /*在這里面,當設置長寬為40px時在加上邊框1px就會超出 40px。 ? ? ? ? 可以使用怪異盒模型,怪異盒模型會使盒子的寬高包括邊框,操持40px;*/ ? ? ? ? box-sizing:border-box; ? ? ? ? width:40px; ? ? ? ? height:40px; ? ? ? ? background: #fff; ? ? ? ? border:1px solid #ccc; ? ? } ? ? </style> </head> <body> ? ? <div class='wrap'> ? ? ? ? <div class='rec'> ? ? ? ? ? ? <div class='rect'>滑塊拖拽驗證 ? ? ? ? ? ? ? ? <div class='silde'><img src="hkkkk.png" alt=""></div> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? </div> ? ? <script> ? ? ? ? //獲取事件 ? ? ? ? var silde = document.querySelector('.silde'); ? ? ? ? var rec = document.querySelector('.rec'); ? ? ? ? var rect= document.querySelector('.rect'); ? ? ? ? var img= document.querySelector('img'); ? ? ? ? var minusX; ?//保存變化的 X坐標(全局變量) ? ? ? ? //注冊事件 ? ? ? ? silde.onmousedown = function(e) { ? ?//鼠標點擊事件,點擊之后執(zhí)行函數(shù),獲得點擊位置的X坐標 ? ? ? ? ? ? var initX = e.clientX; ? ?//保存初始按下位置的 X坐標; ? ? ? ? ? ? console.log(11,e); ? ?//用以測試 ? ? ? ? ? ? document.onmousemove = function(e) { ? ? ? ?//鼠標移動事件 ? ? ? ? ? ? ? ? var moveX = e.clientX; ? ? ? ? ? ? ? ? // var minusX = moveX - initX; ? ?//變化的坐標(要注意作用域的問題,在這里面定義變量,在這個函數(shù)之外的函數(shù)就沒法使用,所以要將minusX變成全局變量) ? ? ? ? ? ? ? ? minusX = moveX - initX; ? ? ? ? ? ? ? ? ?//這里注意一下,獲得的minusX只是一個差值,沒有單位想讓 滑塊的位置改變還需要加上 單位px ? ? ? ? ? ? ? ? ?//這個時候滑塊會跟隨鼠標整個頁面一行的跑,價格條件判段,限制 滑塊移動的區(qū)域不可以超過邊框,保持left<=0。 ? ? ? ? ? ? ? ? ?if(minusX < 0) { ? ? ? ? ? ? ? ? ? ? ?// silde.style.left = '0'; ? ? ? ? ? ? ? ? ? ? ?minusX = 0; ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?if(minusX > 260) { //判斷最大值 ? ? ? ? ? ? ? ? ? ? ?// silde.style.left = '251'; ? ? ? ? ? ? ? ? ? ? ?// 這里面的距離用邊框長度減去 滑塊的長度 300-49 ? ? ? ? ? ? ? ? ? ? ?minusX = 260; ? ? ? ? ? ? ? ? ? ? ?console.log('我到頭了'); ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ?silde.style.left = minusX + 'px'; ? ? ? ? ? ? ? ? ?rec.style.width = minusX + 'px'; ? ? ? ? ? ? ? ? ?if(minusX >= 260) { ? ? ? ? ? ? ? ? ? ? ?rect.style.color = 'white'; ? ? ? ? ? ? ? ? ? ? ?img.src = 'sure.png'; ? ? ? ? ? ? ? ? ? ? ?document.onmousemove = null; ? ? ? ? ? ? ? ? ? ? ?silde.onmousedown = null; ? ? ? ? ? ? ? ? ? ? ?// rect.innerHTML = '驗證成功'; ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? // console.log(222,e,minusX); ? ?//用以測試 ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? document.onmouseup = function () { ? ?//鼠標抬起事件 ? ? ? ? ? ? document.onmousemove = null; ? ?//不允許鼠標移動事件發(fā)生 ? ? ? ? ? ? console.log(111); ? ? ? ? ? ? if(minusX < 260) { //如果沒有到頭 ? ? ? ? ? ? ? ? img.src = 'hkkkk.png'; ? ? ? ? ? ? ? ? silde.style.left = 0; ? ?//設置一個 left值 ? ? ? ? ? ? ? ? rec.style.width = 0; ? ?//綠色背景層設置寬度 ? ? ? ? ? ? } ? ? ? ? } ? ? </script> </body> </html>
實現(xiàn)效果:
案例中所用到的小圖標可以自行獲?。?/p>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中instanceof與typeof運算符的用法及區(qū)別詳細解析
這篇文章主要是對JavaScript中instanceof與typeof運算符的用法及區(qū)別進行了詳細的分析介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript MutationObserver實例講解
MutationObserver用來監(jiān)視DOM變動。DOM的任何變動,比如節(jié)點增減、屬性的變動、文本內(nèi)容的變動都會觸發(fā)MutationObserver事件,它與事件有一個本質(zhì)不同:事件是同步觸發(fā),MutationObserver則是異步觸發(fā),DOM的變動并不會馬上觸發(fā),而是要等到當前所有DOM操作都結(jié)束才觸發(fā)2022-12-12JavaScript中對象property的讀取和寫入方法介紹
這篇文章主要介紹了JavaScript中對象property的讀取和寫入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫入等內(nèi)容,需要的朋友可以參考下2014-12-12JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法
這篇文章主要介紹了JS實現(xiàn)動態(tài)移動層及拖動浮層關(guān)閉的方法,可實現(xiàn)動態(tài)拖動浮動窗口及關(guān)閉窗口的功能,非常具有實用價值,需要的朋友可以參考下2015-04-04BootStrap Validator 版本差異問題導致的submitHandler失效問題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問題導致的submitHandler失效問題的解決方法,下面通過本文給大家詳細說明一下,需要的朋友可以參考下2016-12-12