js實現移動端圖片滑塊驗證功能
阿新 • • 發佈:2020-10-06
之前寫過一篇uniapp框架的滑塊驗證,今天抽個空用原生js實現這個功能,pc端暫時不做,因為pc端只要把touch事件改成mouse事件就能實現,這裡就不再重複寫了。
(最新完美版本,js+canvas實現,相容pc,ie9和移動,js+cavans實現圖片滑塊驗證)
老樣子,還是先看效果
原理和上篇uniapp的滑塊一樣,不一樣的是這裡是純js實現,程式碼是全部是自己寫的,有不清楚的可以留言。
下面是全部程式碼:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .sliderModel { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0.5); display: flex; justify-content: center; align-items: center; display: none; } .title { width: 100%; height: 60px; font-size: 18px; color: #333; display: flex; align-items: center; justify-content: center; } .cont { position: relative; background: #fff; width: 300px; border-radius: 8px; overflow: hidden; padding-bottom: 20px; } .imgWrap { position: relative; width: 280px; height: 150px; border-radius: 8px; margin: 0 auto; overflow: hidden; } #sliderRefresh { position: absolute; top: 20px; right: 30px; cursor: pointer; color: green; } .img { display: block; width: 100%; height: 100%; } .sliderOver { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: #ddd; box-shadow: inset 0 0 5px rgba(0,0.3); } .smartImg { position: absolute; z-index: 2; left: 0; top: 0; width: 50px; height: 50px; overflow: hidden; box-shadow: 0 0 5px rgba(0,0.3); } .simg { position: absolute; display: block; width: 280px; height: 150px; } .sliderBox { width: 280px; margin: 10px auto 0; height: 36px; position: relative; } .sliderF { width: 100%; height: 100%; z-index: 3; } .sliderS { cursor: pointer; position: absolute; left: 0; top: 0; z-index: 2; height: 36px; width: 36px; background: #007cff; border-radius: 36px; display: flex; justify-content: center; align-items: center; } .icon { width: 20px; height: 20px; } .bgC { position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 30px; border-radius: 30px; line-height: 30px; font-size: 14px; color: #999999; box-shadow: inset 0 0 4px #ccc; text-align: center; overflow: hidden; } .bgC_left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 28px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; line-height: 28px; font-size: 14px; background-color: #eee; box-shadow: inset 0 0 4px #ccc; text-align: center; } .showMessage { text-align: center; font-size: 14px; height: 30px; line-height: 30px; } #closeBtn { position: fixed; z-index: 10; bottom: 10px; left: 50%; } </style> </head> <body> <div id="clickBtn">點選</div> <div class="sliderModel"> <div class="cont"> <div class="title">圖形驗證</div> <div id="sliderRefresh">重新整理</div> <div class="imgWrap" id="imgWrap"> <img class="img" src="" /> <div class="sliderOver" id="sliderOver"></div> <div class="smartImg" id="smartImg"> <img class="simg" src="" /> </div> </div> <div class="sliderBox"> <div class="sliderF" id="slider"> <div class="sliderS" id="sliderBtn"> <img class="icon" src="images/slider/sangangy.png" /> </div> </div> <div class="bgC"> 拖動左邊滑塊完成上方拼圖 <div class="bgC_left" id="bgC_left"></div> </div> </div> <div class="showMessage"> </div> </div> </div> <div id="closeBtn">關閉</div> </body> <script src="slider.js"></script> <script> var object = { bImg: 'imgWrap',sImg: 'smartImg',sImgOver: 'sliderOver',sliderF: 'slider',sliderBtn: 'sliderBtn',sliderBg: 'bgC_left',refreshBtn: 'sliderRefresh',range: 5,imgArr: ['images/sliderz/1.jpg','images/sliderz/2.jpg','images/sliderz/3.jpg','images/sliderz/4.jpg','images/sliderz/5.jpg' ],refreshCallback: function (e) { var showMessage = document.getElementsByClassName('showMessage')[0]; showMessage.innerHTML = ""; showMessage.style.color = "#333"; },callback: function (e) { var showMessage = document.getElementsByClassName('showMessage')[0]; if (!e) { showMessage.innerHTML = "驗證失敗,請重新驗證"; showMessage.style.color = "red"; } else { showMessage.innerHTML = "驗證成功!"; showMessage.style.color = "green"; } },} var mSlider = null; document.getElementById('clickBtn').onclick = function () { document.getElementsByClassName('sliderModel')[0].style.display = "flex"; mSlider = new window.mobileSlider(object) } document.getElementById('closeBtn').onclick = function () { document.getElementsByClassName('sliderModel')[0].style.display = "none"; } </script> </html>
js部分(slider.js)
(function () { function mobileSlider(params) { var object = { bImg: params.bImg,//大圖片的盒子 sImg: params.sImg,//圖片上的小圖片 sImgOver: params.sImgOver,//圖片上的佔位區域 sliderF: params.sliderF,//滑塊的父元素 sliderBtn: params.sliderBtn,//滑塊 sliderBg: params.sliderBg,//滑塊滑動過程中的背景塊 refreshBtn: params.refreshBtn,//重新整理按鈕 range: params.range,//驗證通過的執行範圍值 imgArr: params.imgArr,//圖片陣列 refreshCallback: params.refreshCallback,//重新整理回撥 callback: params.callback //驗證回撥函式,true為成功,false為失敗 }; var sliderF = document.getElementById(object.sliderF); var sliderBtn = document.getElementById(object.sliderBtn); var sliderBg = document.getElementById(object.sliderBg); var sImg = document.getElementById(object.sImg); var bImg = document.getElementById(object.bImg); var sImgOver = document.getElementById(object.sImgOver); var refreshBtn = document.getElementById(object.refreshBtn); var max_left = sliderF.offsetWidth - sliderBtn.offsetWidth; var sImgBeginLeft = 0; function refresh() { sliderBtn.style.left = sliderBg.style.width = 0; sImgBeginLeft = 0; var ram = Math.random(); var imgIndex = Math.floor(object.imgArr.length * ram); var imgSrc = object.imgArr[imgIndex]; bImg.getElementsByClassName('img')[0].src = sImg.getElementsByClassName('simg')[0].src = imgSrc; sImgOver.style.left = Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px"; sImg.style.left = sImgBeginLeft = Math.floor((bImg.offsetWidth / 2 - sImgOver.offsetWidth) * ram) + "px"; sImgOver.style.top = sImg.style.top = Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px"; sImg.getElementsByClassName('simg')[0].style.left = -Math.floor(bImg.offsetWidth / 2 + bImg.offsetWidth / 2 * ram - sImgOver.offsetWidth - 6) + "px"; sImg.getElementsByClassName('simg')[0].style.top = -Math.floor((bImg.offsetHeight - sImgOver.offsetWidth - 10) * ram + 10) + "px"; object.refreshCallback(true) } refresh(); sliderBtn.ontouchstart = function (e) { var ev = e || window.event var downX = ev.touches[0].pageX; var sImgLeft = parseInt(sImg.style.left); this.ontouchmove = function (e) { var ev = e || window.event; var leftX = ev.touches[0].pageX - downX; leftX = leftX < 0 ? 0 : (leftX < max_left ? leftX : max_left) sliderBtn.style.left = leftX + 'px'; sliderBg.style.width = leftX + sliderBtn.offsetWidth / 2 + "px"; sImg.style.left = leftX + sImgLeft + "px"; } this.ontouchend = function (e) { this.ontouchmove = null; //移除移動事件 var sImgLeft = parseInt(sImg.style.left); var sImgOverLeft = parseInt(sImgOver.style.left); if (Math.abs(sImgOverLeft - sImgLeft) < object.range) { object.callback && object.callback(true) } else { object.callback && object.callback(false) var timer = null,step = 10; var sliderBtnLeft = parseInt(sliderBtn.style.left) timer = setInterval(function () { sliderBtnLeft -= step; step += 5; if (sliderBtnLeft <= 0) { clearInterval(timer); sliderBtnLeft = 0; sliderBtn.style.left = sliderBg.style.width = 0; sImg.style.left = parseInt(sImgBeginLeft) + "px" } sliderBtn.style.left = sliderBg.style.width = sliderBtnLeft + "px"; sImg.style.left = sliderBtnLeft + parseInt(sImgBeginLeft) + "px" },20) } } }; refreshBtn.ontouchstart = function () { refresh() } } window.mobileSlider = mobileSlider; })()
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。