(编辑:jimmy 日期: 2024/10/30 浏览:2)
之前写过一篇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, 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">点击</div> <div class="sliderModel"> <div class="cont"> <div class="title">图形验证</div> <div id="sliderRefresh">刷新</div> <div class="imgWrap" id="imgWrap"> <img class="img" src="/UploadFiles/2021-04-02/">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 "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; })()以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。