個人筆記005--原生JS實現簡單的拖動滑塊驗證
阿新 • • 發佈：2018-11-11
早上起來後瀏覽網站時看到別人的拖動滑塊驗證，就想著做一個demo，等到有時間把這個優化到到現在的專案（用的是圖片驗證碼）。以下程式碼就是百度之後再修改一下的：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖動滑塊驗證</title> <link rel="stylesheet" type="text/css" href=""> <style> .ani { transition: all .3s; } .wrap { width: 300px; height: 350px; text-align: center; margin: 150px auto; } #slider { position: relative; background-color: #e8e8e8; width: 300px; height: 40px; line-height: 40px; text-align: center; } #slider .handler { position: absolute; top: 0px; left: 0px; border: 20px solid; border-color: lightgreen darkturquoise; cursor: move; } #slider .drag_bg { background-color: #7ac23c; height: 40px; width: 0px; } #slider .drag_text { position: absolute; top: 0px; width: 300px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select: none; -ms-user-select: none; } .slide_ok { color: #fff; } </style> </head> <body> <div class="wrap"> <div id="slider"> <div class="drag_bg"></div> <div class="drag_text" onselectstart="return false;" unselectable="on">拖動滑塊驗證</div> <div class="handler handler_bg"></div> </div> </div> <script> (function(window, document, undefined) { var dog = { //宣告一個名稱空間，或者稱為物件 $: function(id) { return document.querySelector(id); }, on: function(el, type, handler) { el.addEventListener(type, handler, false); }, off: function(el, type, handler) { el.removeEventListener(type, handler, false); } }; //封裝一個滑塊類 function Slider() { var args = arguments[0]; for(var i in args) { this[i] = args[i]; //一種快捷的初始化配置 } //直接進行函式初始化，表示生成例項物件就會執行初始化 this.init(); } Slider.prototype = { constructor: Slider, init: function() { this.getDom(); this.dragBar(this.handler); }, getDom: function() { this.slider = dog.$('#' + this.id); this.handler = dog.$('.handler'); this.drag_text = dog.$('.drag_text'); this.bg = dog.$('.drag_bg'); }, dragBar: function(handler) { var that = this, startX = 0, lastX = 0, doc = document, width = this.slider.offsetWidth, max = width - handler.offsetWidth, drag = { // 按下滑鼠的時候 down: function(e) { var e = e || window.event; that.slider.classList.add('unselect'); startX = e.clientX - handler.offsetLeft; console.log('startX: ' + startX + ' px'); dog.on(doc, 'mousemove', drag.move); dog.on(doc, 'mouseup', drag.up); return false; }, // 滑鼠拖動的時候 move: function(e) { var e = e || window.event; lastX = e.clientX - startX; lastX = Math.max(0, Math.min(max, lastX)); //這一步表示距離大於0小於max，巧妙寫法 console.log('lastX: ' + lastX + ' px'); if(lastX >= max) { handler.classList.add('handler_ok_bg'); that.slider.classList.add('slide_ok'); that.drag_text.innerHTML = '驗證成功'; dog.off(handler, 'mousedown', drag.down); drag.up(); } that.bg.style.width = lastX + 'px'; handler.style.left = lastX + 'px'; }, // 未完成時鬆開滑鼠 up: function(e) { var e = e || window.event; that.slider.classList.remove('unselect'); if(lastX < width) { that.bg.classList.add('ani'); handler.classList.add('ani'); that.bg.style.width = 0; handler.style.left = 0; setTimeout(function() { that.bg.classList.remove('ani'); handler.classList.remove('ani'); }, 300); } dog.off(doc, 'mousemove', drag.move); dog.off(doc, 'mouseup', drag.up); } }; dog.on(handler, 'mousedown', drag.down); } }; window.S = window.Slider = Slider; })(window, document); var defaults = { id: 'slider' }; new S(defaults); </script> </body> </html>