早上起来后浏览网站时看到别人的拖动滑块验证，就想着做一个demo，等到有时间把这个优化到到现在的项目（用的是图片验证码）。以下代码就是百度之后再修改一下的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖动滑块验证</title>
<link rel="stylesheet" type="text/css" href="">
<style>
.ani {
transition: all .3s;
}
.wrap {
width: 300px;
height: 350px;
text-align: center;
margin: 150px auto;
}
#slider {
position: relative;
background-color: #e8e8e8;
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
}
#slider .handler {
position: absolute;
top: 0px;
left: 0px;
border: 20px solid;
border-color: lightgreen darkturquoise;
cursor: move;
}
#slider .drag_bg {
background-color: #7ac23c;
height: 40px;
width: 0px;
}
#slider .drag_text {
position: absolute;
top: 0px;
width: 300px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
.slide_ok {
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div id="slider">
<div class="drag_bg"></div>
<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
<div class="handler handler_bg"></div>
</div>
</div>
<script>
(function(window, document, undefined) {
var dog = { //声明一个命名空间，或者称为对象
$: function(id) {
return document.querySelector(id);
},
on: function(el, type, handler) {
el.addEventListener(type, handler, false);
},
off: function(el, type, handler) {
el.removeEventListener(type, handler, false);
}
};
//封装一个滑块类
function Slider() {
var args = arguments[0];
for(var i in args) {
this[i] = args[i]; //一种快捷的初始化配置
}
//直接进行函数初始化，表示生成实例对象就会执行初始化
this.init();
}
Slider.prototype = {
constructor: Slider,
init: function() {
this.getDom();
this.dragBar(this.handler);
},
getDom: function() {
this.slider = dog.$('#' + this.id);
this.handler = dog.$('.handler');
this.drag_text = dog.$('.drag_text');
this.bg = dog.$('.drag_bg');
},
dragBar: function(handler) {
var that = this,
startX = 0,
lastX = 0,
doc = document,
width = this.slider.offsetWidth,
max = width - handler.offsetWidth,
drag = {
// 按下鼠标的时候
down: function(e) {
var e = e || window.event;
that.slider.classList.add('unselect');
startX = e.clientX - handler.offsetLeft;
console.log('startX: ' + startX + ' px');
dog.on(doc, 'mousemove', drag.move);
dog.on(doc, 'mouseup', drag.up);
return false;
},
// 鼠标拖动的时候
move: function(e) {
var e = e || window.event;
lastX = e.clientX - startX;
lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max，巧妙写法
console.log('lastX: ' + lastX + ' px');
if(lastX >= max) {
handler.classList.add('handler_ok_bg');
that.slider.classList.add('slide_ok');
that.drag_text.innerHTML = '验证成功';
dog.off(handler, 'mousedown', drag.down);
drag.up();
}
that.bg.style.width = lastX + 'px';
handler.style.left = lastX + 'px';
},
// 未完成时松开鼠标
up: function(e) {
var e = e || window.event;
that.slider.classList.remove('unselect');
if(lastX < width) {
that.bg.classList.add('ani');
handler.classList.add('ani');
that.bg.style.width = 0;
handler.style.left = 0;
setTimeout(function() {
that.bg.classList.remove('ani');
handler.classList.remove('ani');
}, 300);
}
dog.off(doc, 'mousemove', drag.move);
dog.off(doc, 'mouseup', drag.up);
}
};
dog.on(handler, 'mousedown', drag.down);
}
};
window.S = window.Slider = Slider;
})(window, document);
var defaults = {
id: 'slider'
};
new S(defaults);
</script>
</body>
</html>
7576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
