이 글의 내용은 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 3f6d6d5c49961631378f2423c46d3b58 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(`865c9ee3e409b3abfe1d5ed7c0cf6d5b`) } verify.css('background-image', `url('image/1.png')`) }
관련 권장 사항:
위 내용은 js는 슬라이딩 슬라이더 검증을 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!