本文修改自PC端的js滑塊驗證組件，PC端使用的是onmousedown，onmouseup，nomousemove。原文找不到了，也是博客園文章，在此感謝廣大網友的生產力吧。
說下對插件和組件的理解：組件是擁有靜態dom的插件，所以說組件可以轉為插件。如果組件的dom部分，動態創建了，那就可以變為插件。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>滑塊驗證解鎖</title> 7 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> 8 <style> 9 .drag { 10 width: 300px; 11 height: 40px; 12 line-height: 40px; 13 background-color: #e8e8e8; 14 position: relative; 15 margin: 0 auto; 16 } 17 18 .bg { 19 width: 40px; 20 height: 100%; 21 position: absolute; 22 background-color: #75CDF9; 23 } 24 25 .text { 26 position: absolute; 27 width: 100%; 28 height: 100%; 29 text-align: center; 30 user-select: none; 31 } 32 33 .btn { 34 width: 40px; 35 height: 38px; 36 position: absolute; 37 border: 1px solid #ccc; 38 cursor: move; 39 font-family: "宋體"; 40 text-align: center; 41 background-color: #fff; 42 user-select: none; 43 color: #666; 44 } 45 </style> 46 </head> 47 48 <body> 49 <div class="drag"> 50 <div class="bg"></div> 51 <div class="text" onselectstart="return false;">請拖動滑塊解鎖</div> 52 <div class="btn">>></div> 53 </div> 54 <script> 55 (function() { 56 //一、定義一個獲取DOM元素的方法 57 var $ = function(selector) { 58 return document.querySelector(selector); 59 }, 60 box = $(".drag"), //容器 61 bg = $(".bg"), //背景 62 text = $(".text"), //文字 63 btn = $(".btn"), //滑塊 64 success = false, //是否通過驗證的標志 65 distance = box.offsetWidth - btn.offsetWidth; //滑動成功的寬度（距離） 66 67 //二、給滑塊注冊鼠標touchmove 68 btn.addEventListener("touchmove", function(e) { 69 70 //1.鼠標按下之前必須清除掉后面設置的過渡屬性 71 btn.style.transition = ""; 72 bg.style.transition = ""; 73 74 //說明：clientX 事件屬性會返回當事件被觸發時，鼠標指針向對於瀏覽器頁面(或客戶區)的水平坐標。 75 76 //2.當滑塊位於初始位置時，得到鼠標按下時的水平位置 77 var e = e || window.event; 78 var offsetX = e.touches[0].clientX- btn.offsetWidth; 79 //三、給文檔注冊鼠標移動事件 80 81 //3.在這里判斷一下：鼠標水平移動的距離 與 滑動成功的距離 之間的關系 82 if (offsetX > distance) { 83 offsetX = distance; //如果滑過了終點，就將它停留在終點位置 84 } else if (offsetX < 0) { 85 offsetX = 0; //如果滑到了起點的左側，就將它重置為起點位置 86 } 87 88 //4.根據鼠標移動的距離來動態設置滑塊的偏移量和背景顏色的寬度 89 btn.style.left = offsetX + "px"; 90 bg.style.width = offsetX + "px"; 91 92 //如果鼠標的水平移動距離 = 滑動成功的寬度,保證只滑動一次 93 if (offsetX == distance && !success) { 94 95 //1.設置滑動成功后的樣式 96 text.innerHTML = "驗證通過"; 97 text.style.color = "#fff"; 98 btn.innerHTML = "√"; 99 btn.style.color = "green"; 100 bg.style.backgroundColor = "lightgreen"; 101 102 //2.設置滑動成功后的狀態 103 success = true; 104 //成功后，清除掉鼠標按下事件和移動事件（因為移動時並不會涉及到鼠標松開事件） 105 106 //3.成功解鎖后的回調函數 107 setTimeout(function() { 108 alert('解鎖成功！'); 109 }, 100); 110 } 111 112 }) 113 btn.addEventListener("touchend", function(e) { 114 //如果鼠標松開時，滑到了終點，則驗證通過 115 116 if (success) { 117 118 return; 119 } else { 120 //反之，則將滑塊復位（設置了1s的屬性過渡效果） 121 btn.style.left = 0; 122 bg.style.width = 0; 123 //過渡屬性設置 124 btn.style.transition = "left 1s ease"; 125 bg.style.transition = "width 1s ease"; 126 127 } 128 129 }) 130 })(); 131 </script> 132 </body> 133 134 </html>
本文結束。