js实现移动端图片滑块验证功能
程序员文章站
2022-08-18 08:14:49
之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。(最新完美版本，js+canva...
之前写过一篇uniapp框架的滑块验证，今天抽个空用原生js实现这个功能，pc端暂时不做，因为pc端只要把touch事件改成mouse事件就能实现，这里就不再重复写了。
(最新完美版本，js+canvas实现，兼容pc，ie9和移动，)
老样子，还是先看效果
原理和上篇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="" />
<div class="sliderover" id="sliderover"></div>
<div class="smartimg" id="smartimg">
<img class="simg" src="" />
</div>
</div>
<div class="sliderbox">
<div class="sliderf" id="slider">
<div class="sliders" id="sliderbtn">
<img class="icon" src="images/slider/sangangy.png" />
</div>
</div>
<div class="bgc">
拖动左边滑块完成上方拼图
<div class="bgc_left" id="bgc_left"></div>
</div>
</div>
<div class="showmessage">
</div>
</div>
</div>
<div id="closebtn">关闭</div>
</body>
<script src="slider.js"></script>
<script>
var object = {
bimg: 'imgwrap',
simg: 'smartimg',
simgover: 'sliderover',
sliderf: 'slider',
sliderbtn: 'sliderbtn',
sliderbg: 'bgc_left',
refreshbtn: 'sliderrefresh',
range: 5,
imgarr: ['images/sliderz/1.jpg', 'images/sliderz/2.jpg', 'images/sliderz/3.jpg', 'images/sliderz/4.jpg',
'images/sliderz/5.jpg'
],
refreshcallback: function (e) {
var showmessage = document.getelementsbyclassname('showmessage')[0];
showmessage.innerhtml = "";
showmessage.style.color = "#333";
},
callback: function (e) {
var showmessage = document.getelementsbyclassname('showmessage')[0];
if (!e) {
showmessage.innerhtml = "验证失败，请重新验证";
showmessage.style.color = "red";
} else {
showmessage.innerhtml = "验证成功！";
showmessage.style.color = "green";
}
},
}
var mslider = null;
document.getelementbyid('clickbtn').onclick = function () {
document.getelementsbyclassname('slidermodel')[0].style.display = "flex";
mslider = new window.mobileslider(object)
}
document.getelementbyid('closebtn').onclick = function () {
document.getelementsbyclassname('slidermodel')[0].style.display = "none";
}
</script>
</html>
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 ? 0 : (leftx < max_left ? leftx : max_left)
sliderbtn.style.left = leftx + 'px';
sliderbg.style.width = leftx + sliderbtn.offsetwidth / 2 + "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;
})()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。