js实现滑动滑块验证（附代码）
程序员文章站
2022-03-25 09:39:32
...
本篇文章给大家带来的内容是关于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实现滑动滑块验证（附代码）的详细内容，更多请关注其它相关文章！