之前寫過一篇uniapp框架的滑塊驗(yàn)證,今天抽個(gè)空用原生js實(shí)現(xiàn)這個(gè)功能,pc端暫時(shí)不做,因?yàn)閜c端只要把touch事件改成mouse事件就能實(shí)現(xiàn),這里就不再重復(fù)寫了。
(最新完美版本,js+canvas實(shí)現(xiàn),兼容pc,ie9和移動(dòng),js+cavans實(shí)現(xiàn)圖片滑塊驗(yàn)證)
老樣子,還是先看效果
原理和上篇uniapp的滑塊一樣,不一樣的是這里是純js實(shí)現(xiàn),代碼是全部是自己寫的,有不清楚的可以留言。
下面是全部代碼:
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, 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, 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, 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">點(diǎn)擊</div> <div class="sliderModel"> <div class="cont"> <div class="title">圖形驗(yàn)證</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"> 拖動(dòng)左邊滑塊完成上方拼圖 <div class="bgC_left" id="bgC_left"></div> </div> </div> <div class="showMessage"> </div> </div> </div> <div id="closeBtn">關(guān)閉</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 = "驗(yàn)證失敗,請(qǐng)重新驗(yàn)證"; showMessage.style.color = "red"; } else { showMessage.innerHTML = "驗(yàn)證成功!"; 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>
網(wǎng)頁標(biāo)題:js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能-創(chuàng)新互聯(lián)
網(wǎng)站鏈接:http://bm7419.com/article34/cdicpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、營銷型網(wǎng)站建設(shè)、微信小程序、標(biāo)簽優(yōu)化、網(wǎng)站收錄、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容