滑块验证码

最新推荐文章于 2024-07-07 21:12:01 发布

weixin_30614587

最新推荐文章于 2024-07-07 21:12:01 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mouse2417/p/5213886.html

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#box {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF6E3D;
left: 0px;
top: 0px;
border-radius: 50%;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}

#box span {
width: 6px;
height: 24px;
display: block;
float: left;
margin-top: 13px;
margin-left: 3px;
border-radius: 5px;
background: green;
}

#box span:first-child {
margin-left: 14px;
}
</style>
</head>

<body>
<div id="box">
<span></span>
<span></span>
<span></span>
</div>
</body>
<scrip src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function Drag(id) {
this.obj = document.getElementById(id) || document.getElementsByClassName(id)[0];
this.disX = 0;
this.disY = 0;

}

Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
return false;
};
};

Drag.prototype.mouseDown = function(e) {
var that = this;
this.disX = e.clientX - this.obj.offsetLeft;
//this.disY = e.clientY - this.obj.offsetTop;

document.onmousemove = function(e) {
var e = e || window.event;

that.mouseMove(e);
};

document.onmouseup = function() {
that.mouseUp();
}
};

Drag.prototype.mouseMove = function(e) {
var temp = e.clientX - this.disX
this.obj.style.left = (e.clientX - this.disX) + 'px';
if( temp > 500){
this.obj.style.left = '500px';
that.mouseUp();
}else if( temp < 0){
this.obj.style.left = "0px";
that.mouseUp();
}

console.log(temp);

//this.obj.style.top = (e.clientY - this.disY) + 'px';
};

Drag.prototype.mouseUp = function() {
document.onmousemove = null;
document.onmouseup = null;
};

var drag = new Drag('box');
drag.init();
</script>

</html>

转载于:https://www.cnblogs.com/mouse2417/p/5213886.html