滑块验证码-纯js
效果
注意：
图⽚⽂件夹命名为：imgs
图⽚命名为：imgs + 数字 + .jpg 格式
点击切换图⽚时可看着 F12 控制⾯板如果没有这张图⽚，没有效果，
图⽚是随机的，可能会提⽰不到图⽚，正常现象
（亲，也可以⾃⼰改变图⽚路径，在代码的最下⾯ refreshImg 函数⾥⾯）
我是在桌⾯新建了⼀个imgs⽂件夹和html⽂件，imgs⾥⾯放的imgs0.jpg，imgs1.jpg，imgs2.jpg，imgs3.jpg，因为没有imgs4.jpg所以没效果且报错
如果报$问题，请⽹上搜索在线jquery，并修改。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
}
.
imgBox {
position: relative;
width: 300px;
overflow: hidden;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
}
.imgBox img {
width: 100%;
height: 250px;
}
.imgBox div {
display: none;
}
.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;
}
.text {
opacity: 1;
transition: opacity 0.5s ease-in-out;
color: #aaa;
}
.swiper {
position: absolute;
top: -10px;
left: 0px;
width: 58px;
height: 58px;
border-radius: 50%;
background-color: pink;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
}
.verify {
position: absolute;
left: 10px;
width: 38px;
height: 38px;
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: 10;
}
.verified {
position: absolute;
width: 38px;
height: 38px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;
}
.refreshBox {
border-top: 1px solid #ccc;
padding: 15px 0 0 5px;
}
.refresh {
color: #fff;
cursor: pointer;
-
webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 8px 20px;
border-radius: 20px;
background-color: #555;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-in-out;
}
.refresh.click {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;
}
</style>
</head>
<body>
<div class="box">
<div class="imgBox">
<div class="verify"></div>
<div class="verified"></div>
</div>
<div class="handle">
<span class="swiper"></span>
<span class="text">拖动滑块</span>
</div>
<div class="refreshBox">
<span class="refresh">点击切换图⽚</span>
</div>
</div>
</body>
<script src="code.jquery/jquery-3.2.1.min.js"></script>
<script>
var box = $('.box'),
imgBox = $('.imgBox'),
handle = $('.handle'),
swiper = $('.swiper'),
text = $('.text'),
verify = $('.verify'),
verified = $('.verified'),
refresh = $('.refresh')
// 图⽚集合
var imgs = []
for (let i = 1; i < 17; i++) {
imgs.push('' + i + i)
}
$(function () {
// 随机添加背景图
refreshImg()
refresh.click(function () {
e = event || window.event
e.stopPropagation()
refreshImg()
start()
})
$(this).addClass('click')
})
$(this).removeClass('click')
})
})
function start() {
var verImg = ElementsByClassName('verImg')[0]
if (verImg) {
/
/ 获取图⽚⾼度
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) {
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 = winWjquery在线图片
}
swiper.css('left', `${l}px`)
verify.css('left', `${l + 10}px`)
}
function refreshImg() {
// 随机⽣成下标
var index = und(Math.random() * 15)
var imgH = 0
verify.hide()
verified.hide()
var verImg = $('.verImg')
if (verImg.length) {
verImg.attr('src', `./imgs/imgs${[index]}.jpg`) //imgs⽂件夹存放图⽚
} else {
imgBox.prepend(`<img class='verImg' src="./imgs/imgs${[index]}.jpg" />`)            }
verify.css('background-image', `url('./imgs/imgs${[index]}.jpg')`)
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。