一般很多網站都有滑動驗證的功能,簡單滑動驗證的原理如下圖所示:
主要理解思想就行 圖中的代碼可能和實際寫的有所不同 HTML和CSS也可根據仔細的喜好就行修改
完整代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .drag { 10 width: 300px; 11 height: 40px; 12 position: relative; 13 background-color: #e8e8e8; 14 margin: auto auto; 15 user-select: none; 16 } 17 18 .bg { 19 height: 100%; 20 position: absolute; 21 width: 40px; 22 background-color: rgb(39, 233, 21); 23 } 24 25 .text { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 text-align: center; 30 line-height: 40px; 31 } 32 33 .btn { 34 width: 40px; 35 height: 38px; 36 border: 1px solid #ccc; 37 background-color: #fff; 38 color: #666; 39 line-height: 38px; 40 text-align: center; 41 position: absolute; 42 cursor: move; 43 } 44 </style> 45 </head> 46 47 <body> 48 <div class="drag"> 49 <div class="bg"></div> 50 <div class="text" onselectstart="return false;">滑動驗證</div> 51 <div class="btn">>></div> 52 </div> 53 </body> 54 <script> 55 onload = function () { 56 function $(a) { 57 return document.querySelector(a);//獲取元素的函數 58 } 59 var oDarg = $(".drag"); 60 var oBg = $(".bg"); 61 var oText = $(".text"); 62 var oBtn = $(".btn"); 63 var success = false;//判斷驗證是否成功 64 var distance = oDarg.offsetWidth - oBtn.offsetWidth;//驗證成功的距離 65 oBtn.onmousedown = function (eve) {//給物塊設置鼠標按下事件 66 oBg.style.transition = "";//在點擊事件按下后 必須清除后面設置的transition屬性 否則會造成物塊移動的bug 具體可自行測試 67 oBtn.style.transition = ""; 68 var e = eve || window.event; 69 var downX = e.clientX;//獲取鼠標剛按下時的坐標 相對於瀏覽器頁面 70 document.onmousemove = function (eve) {//這里要給document設置鼠標移動事件 而不能設置物塊 如果設置了物塊移動也會有小bug 自行測試 71 var e = eve || window.event; 72 var moveX = e.clientX;//獲取鼠標移動時的坐標 相對於瀏覽器頁面 73 var offsetX = moveX - downX;//物塊移動的距離 74 if (offsetX > distance) {//如果移動的距離已經大於本應該移動的距離 那么就將它設置為驗證成功時的距離 75 offsetX = distance; 76 } else if (offsetX < 0) {//同樣 如果移動的距離小於0時 將它設置為0 保證不會超出范圍 77 offsetX = 0; 78 } 79 oBtn.style.left = offsetX + "px"; 80 oBg.style.width = offsetX + "px"; 81 if (offsetX == distance) {//判斷驗證通過 82 oText.innerHTML = "驗證通過"; 83 oBtn.innerHTML = "√"; 84 oText.style.color = "#FFF"; 85 oBtn.style.color = "rgb(39, 233, 21)"; 86 success = true;//驗證通過時的條件 87 document.onmousemove = null;//驗證通過后 鼠標按下事件和鼠標移動都沒用了 因此需要清除 88 oBtn.onmousedown = null; 89 setTimeout(function () { 90 alert("解鎖成功"); 91 }, 10) 92 } 93 } 94 } 95 document.onmouseup = function () {//這里也是給document設置鼠標抬起事件 96 if (success) {如果已經驗證成功了 那么結束函數 97 return; 98 } else {//反之 驗證沒有通過 則物塊原來的位置 99 oBtn.style.left = 0; 100 oBg.style.width = 0; 101 oBg.style.transition = "width 1s ease"; 102 oBtn.style.transition = "left 1s ease"; 103 } 104 document.onmousemove = null;//返回到原來的位置過程中 需要清除鼠標移動事件和鼠標抬起事件 105 oBtn.onmouseup = null; 106 } 107 } 108 </script> 109 </html>
完整效果:
一般的網站都有滑動驗證功能,理解實現原理,利用原生JS寫不難,希望能對你有所幫助!