<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin: 0 auto;
text-align: center;
}
.bg {
width: 0px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #75CDF9;
}
.btn {
width: 40px;
height: 38px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #ccc;
cursor: move;
font-family: "宋体";
text-align: center;
background-color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
color: #666;
z-index: 10;
}
.bg span {
display: none;
}
</style>
</head>
<body>
<div class="box">
请拖动滑块解锁
<div class="bg" id="bg">
<span>验证成功</span>
</div>
<div class="btn" id="btn">>></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
//获取元素
var oBox = document.querySelector(".box");
var oBg = document.getElementById("bg");
var oBtn = document.getElementById("btn");
var oSpan = document.querySelector(".bg span");
console.log(oBtn.innerHTML);
var bgWidth = oBox.offsetWidth - oBtn.offsetWidth;
console.log(bgWidth);
//绑定事件
oBtn.onmousedown = function(e) {
var left = this.offsetLeft; //0
//起点--鼠标相对于浏览器的位置
var originX = e.clientX;
oBtn.onmousemove = function(e) {
var Left = parseInt(oBtn.style.left);
console.log(Left);
if(oBtn.style.left == bgWidth + 'px') {
oBg.style.background = "forestgreen";
oSpan.style.display = "block";
oBtn.innerHTML = '<div class="btn" id="btn">√</div>';
oBtn.style.border = "0"
return false;
oBtn.style.left = bgWidth + "px";
}
if(Left < 0 || Left >= bgWidth) {
return false;
}
//终点
var endX = e.clientX;
//移动的距离
var distanceX = endX - originX;
oBtn.style.left = (left + distanceX) + "px";
//改变bg
oBg.style.width = (left + distanceX) + "px";
}
}
//移除move事件
document.onmouseup = function() {
oBtn.onmousemove = null;
console.log(oBtn.style.left);
if(oBtn.style.left != bgWidth + 'px') {
oBtn.style.left = 0 + "px";
oBg.style.width = 0 + "px";
}
}
}
</script>
</body>
</html>
