效果图
滑动解锁前:
滑动解锁后:
具体代码如下:(一个html页面,一个css文件,两个js文件)
目录结构:
slideUnlock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动解锁验证</title>
<link rel="stylesheet" type="text/css" href="css/drag.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/drag.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--<input type="hidden" id="code" />-->
<div id="slide_box">
<div id="slide_xbox">
<div id="btn">
<i class="iconfont icon-double-right"></i>
</div>
</div>
拖动滑块验证
</div>
</body>
</html>
drag.css
/* 滑动解锁验证 按钮样式 */
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1516950505203');
/* IE9*/
src: url('iconfont.eot?t=1516950505203#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('iconfont.ttf?t=1516950505203') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1516950505203#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-2guanbi:before {
content: "\e602";
}
.icon-fuxuansel:before {
content: "\e64d";
}
.icon-mima:before {
content: "\e65b";
}
.icon-double-right:before {
content: "\e763";
}
.icon-icon-:before {
content: "\e6e6";
}
.icon-xuanzhong:before {
content: "\e619";
}
/* 滑动解锁验证 其它样式 */
#slide_box {
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
color: #717171;
background-color: #e8e8e8;
border: none;
margin-bottom: 20px;
}
#slide_xbox {
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #fff;
position: absolute;
background: #35b34a;
}
#btn {
cursor: pointer;
width: 50px;
height: 40px;
background-color: #fff;
float: right;
-webkit-box-shadow: 0px 0px 15px 0px #ddd;
-moz-box-shadow: 0px 0px 15px 0px #ddd;
box-shadow: 0px 0px 15px 0px #ddd;
color: #8a8c97;
}
#btn > .iconfont {
font-size: 20px;
}
drag.js
var locked;
window.onload = function() {
slide();
//禁止F12
$("*").keydown(function(e) { //判断按键
e = window.event || e || e.which;
if (e.keyCode == 123) {
e.keyCode = 0;
return false;
}
});
//禁止审查元素
$(document).bind("contextmenu", function(e) {
return false;
});
}
window.onresize = function() {
if (locked == true) {
var boxWidth = $('#slide_box').width();
$('#slide_xbox').width(boxWidth);
} else {
slide();
}
}
//滑动解锁移动
function slide() {
var slideBox = $('#slide_box')[0];
var slideXbox = $('#slide_xbox')[0];
var btn = $('#btn')[0];
var slideBoxWidth = slideBox.offsetWidth;
var btnWidth = btn.offsetWidth;
//pc端
btn.ondragstart = function() {
return false;
};
btn.onselectstart = function() {
return false;
};
btn.onmousedown = function(e) {
var disX = e.clientX - btn.offsetLeft;
document.onmousemove = function(e) {
var objX = e.clientX - disX + btnWidth;
if (objX < btnWidth) {
objX = btnWidth
}
if (objX > slideBoxWidth) {
objX = slideBoxWidth
}
$('#slide_xbox').width(objX + 'px');
};
document.onmouseup = function(e) {
var objX = e.clientX - disX + btnWidth;
if (objX < slideBoxWidth) {
objX = btnWidth;
} else {
objX = slideBoxWidth;
locked = true;
/*$("#code").val("1");*/
$('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
}
$('#slide_xbox').width(objX + 'px');
document.onmousemove = null;
document.onmouseup = null;
};
};
//移动端
var cont = $("#btn");
var startX = 0,
sX = 0,
moveX = 0,
leftX = 0;
cont.on({ //绑定事件
touchstart: function(e) {
startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标
sX = $(this).offset().left; //相对于当前窗口X轴的偏移量
leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
},
touchmove: function(e) {
e.preventDefault();
moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
var objX = moveX - leftX + btnWidth;
if (objX < btnWidth) {
objX = btnWidth
}
if (objX > slideBoxWidth) {
objX = slideBoxWidth
}
$('#slide_xbox').width(objX + 'px');
},
touchend: function(e) {
var objX = moveX - leftX + btnWidth;
if (objX < slideBoxWidth) {
objX = btnWidth;
} else {
objX = slideBoxWidth;
locked = true;
/*$("#code").val("1");*/
$('#slide_xbox').html('验证通过<div id="btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
}
$('#slide_xbox').width(objX + 'px');
}
});
}