結合jQuery實現了一個簡單的滑塊驗證，效果圖如下：
驗證前
通過驗證
slide-verify.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑動</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./assets/css/slide-verify.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="./assets/js/slide-verify.js"></script>
</head>
<body>
<div>
<div class="drag" id="drag">
<div class="drag_bg"></div>
<div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
請按住滑塊，拖動到最右邊
</div>
<div class="handler handler_bg"></div>
</div>
</div>
<script>
$('#drag').drag({"verifyOk": function () {
console.log('驗證通過')
}});
</script>
</body>
</html>
slide-verify.css:
.drag{
position: relative;
background-color: #e8e8e8;
width: 300px;
height: 34px;
line-height: 34px;
text-align: center;
}
.drag .handler{
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: move;
}
.handler_bg{
background-color: #fff;
background-image: url("../img/slider.png");
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
.handler_ok_bg{
background-color: #fff;
background-image: url("../img/pass.png");
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#drag .drag_bg{
background-color: #7ac23c;
height: 34px;
width: 0px;
}
#drag .drag_text{
position: absolute;
top: 0px;
width: 300px;
color:#9c9c9c;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select:none;
-ms-user-select:none;
font-size: 12px;
}
/*掃光效果*/
.slidetounlock{
font-size: 12px;
background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slidetounlock 3s infinite;
-webkit-text-size-adjust:none
}
@-webkit-keyframes slidetounlock{
0%{background-position:-200px 0}
100%{background-position:200px 0}
}
slide-verify.js:
$.fn.drag = function(options) {
var x, drag = this, isMove = false, defaults = {
};
var options = $.extend(defaults, options);
var handler = drag.find('.handler');
var drag_bg = drag.find('.drag_bg');
var text = drag.find('.drag_text');
var maxWidth = drag.width() - handler.width(); //能滑動的最大間距
var ISPC = isPC();
var touchEvents = {
touchstart: "touchstart",
touchmove: "touchmove",
touchend: "touchend",
/**
* @desc:判斷是否pc設備，若是pc，需要更改touch事件為鼠標事件，否則默認觸摸事件
*/
initTouchEvents: function () {
if (isPC()) {
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
}
}
};
touchEvents.initTouchEvents();
function isPC() {
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
//鼠標按下時候的x軸的位置
handler.bind(touchEvents.touchstart, function (e) {
isMove = true;
var touch = ISPC ? e : e.originalEvent.targetTouches[0];
x = touch.pageX - parseInt(handler.css('left'), 10);
})
$(document).bind(touchEvents.touchmove, function (e) {
var touch = ISPC ? e : e.originalEvent.targetTouches[0];
var _x = touch.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
if (isMove) {
if (_x > 0 && _x <= maxWidth) {
handler.css({'left': _x});
drag_bg.css({'width': _x});
} else if (_x > maxWidth) { //鼠標指針移動距離達到最大時清空事件
dragOk();
}
}
});
$(document).bind(touchEvents.touchend, function (e) {
isMove = false;
var touch = ISPC ? e : e.originalEvent.changedTouches[0];
var _x = touch.pageX - x;
if (_x < maxWidth) { //鼠標松開時，如果沒有達到最大距離位置，滑塊就返回初始位置
handler.css({'left': 0});
drag_bg.css({'width': 0});
}
});
//清空事件
function dragOk() {
handler.removeClass('handler_bg').addClass('handler_ok_bg');
text.removeClass('slidetounlock').text('驗證通過').css({'color':'#fff'}); //modify
// drag.css({'color': '#fff !important'});
handler.css({'left': maxWidth});
drag_bg.css({'width': maxWidth});
handler.unbind(touchEvents.touchstart);
$(document).unbind(touchEvents.touchmove);
$(document).unbind(touchEvents.touchend);
options.verifyOk();
}
};
