本篇文章给大家带来的内容是关于js实现滑动滑块验证（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
html:<!doctype html><html><head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="pintu.css" type="text/css"></head><body> <div> <div> <!--<img src="image/1.png">--> <div></div> <div></div> </div> <div> <span></span> <span>拖动滑块</span> </div> </div><script src="jquery.js"></script><script src="pintu.js"></script></body></html>
css:.box { width: 300px; background-color: palevioletred; padding: 20px; background-color: #fff; box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);}.imgbox img { width: 100%;}.imgbox { position: relative; width: 300px; overflow: hidden; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);}.verify { position: absolute; left: 10px; width: 38px; height: 38px; top: 50%; border-radius: 5px; background-repeat: no-repeat; background-attachment: scroll; background-size: 300px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4), 0 0 10px 0 rgba(90, 90, 90, 0.4); z-index: 1;}.verified { position: absolute; width: 38px; height: 38px; top: 50%; right: 10px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;}.handle { display: flex; align-items: center; position: relative; height: 30px; border-radius: 20px; margin: 20px 0; padding: 4px 0 4px 70px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2) inset; background: #f5f5f5; user-select: none;}.swiper { position: absolute; top: -7px; left: 0px; width: 48px; height: 48px; border-radius: 50%; background-color: pink; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2); z-index: 2;}.text { color: #aaa; position: relative; z-index: 1; width: 100%; border-radius: 8px; padding-left: 20px; margin-left: -30px; background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1f1f1), color-stop(1, #f5f5f5)); transition: opacity 0.5s ease-in-out; -webkit-animation: slidetounlock 2s infinite;}@keyframes slidetounlock { 0% { background-position: -100px 0 } 50%{ background-position: 0px 0 } 100% { background-position: 100px 0 }}
js:var box = $('.box'), imgbox = $('.imgbox'), handle = $('.handle')swiper = $('.swiper'), text = $('.text'), verify = $('.verify'), verified = $('.verified')$(function () { // 随机添加背景图 refreshimg() window.onload = start()})function start() { var verimg = $('.verimg')[0]; if (verimg) { verimg.onload = function () { //获取图片的高度 var imgh = this.clientheight; //随机生成坐标（图片框固定宽度为300px 高度不定） var verx = 150 * (1 + math.random()) - 38, very = imgh / 4 + math.random() * imgh / 2; //用户滑动函数 fndown(verx, very); } }}function fndown(verx, very) { swiper.mousedown(function () { e=event || window.event e.stoppropagation()//阻止冒泡行为（让子元素与父元素的响应分离） //30为模块的宽度 verify.css({ display: 'block', top: `${very}px`, 'background-position': `-${verx}px -${very}px` }) verified.css({display: 'block', left: `${verx}px`, top: `${very}px`}) // 获取鼠标到按钮的距离 var disx = e.clientx - $(this).offset().left, disy = e.clienty - $(this).offset().top; text.css('opacity', '0'); //防止重复绑定多次触发 box.unbind('mousemove'); box.unbind('mouseup'); //移动 box.bind('mousemove', function () { e = event || window.event; fnmove(e, disx, disy); }) //释放 box.bind('mouseup', function () { var stopl = verify.offset().left - 28; //误差在2px以内则算验证成功 if (math.abs(stopl - verx) > 2) { alert('验证失败'); } else { alert('验证成功'); } //解除绑定，并将滑块模块归位 box.unbind('mousemove'); swiper.css('left', '0px'); verify.css('left', '10px'); text.css('opacity', '1') box.unbind('mouseup'); }) })}function fnmove(e, posx, posy) { // 这里的e是以鼠标为参考 var l = e.clientx - posx - $(handle).offset().left, winw = $(handle).width() + 29 // 限制拖动范围只能在handle中 if (l < 0) { l = 0 } else if (l > winw) { l = winw } swiper.css('left', `${l}px`) verify.css('left', `${l + 10}px`)}function refreshimg() { verify.hide() verified.hide() var verimg = $('.verimg') if (verimg.length) { verimg.attr('src', `image/1.png`) } else { imgbox.prepend(`<img class='verimg' src="image/1.png" />`) } verify.css('background-image', `url('image/1.png')`)}
相关推荐：
图片滑动验证码怎样实现
js和canvas实现滑动拼图验证码功能
基于js组件实现拖动滑块验证功能
js登录滑动验证的实现
以上就是js实现滑动滑块验证（附代码）的详细内容。