html代码部分:
<div id="wrapper">
<div id="drop_box">
<span class="iconfont icon-jiantouyou" id="spanBox"></span>
</div>
<p id="text">拖动滑块验证</p>
<div id="bg">
</div>
</div>
CSS部分:
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 300px;
height: 30px;
background: #9F9F9F;
text-align: center;
line-height: 30px;
margin: 20px auto;
position: relative;
}
#drop_box{
width: 40px;
height: 30px;
background-color: #ddd;
position: absolute;
z-index:1000
}
#bg{
height: 30px;
background: #0BB20C;
position: absolute;
left: 0px;
top: 0px;
}
#text{
position: relative;
z-index: 999;
}
JS部分:
window.onload = function(){
var dropBox = document.querySelector('#drop_box');
var wrapper = document.querySelector('#wrapper');
var text = document.querySelector('#text');
var bg = document.querySelector('#bg');
var spanBox = document.querySelector('#spanBox');
var classVal = document.getElementById("spanBox").getAttribute("class");
classVal = classVal.replace("icon-jiantouyou","icon-zhengque");
var flag = false;//验证是否正确
dropBox.onmousedown = function(event){
var downX = event.clientX;//鼠标按下去的clientX
dropBox.onmousemove = function(event){
var moveX = event.clientX - downX;//鼠标移动的clientX
if(moveX > 0){
this.style.left = moveX + 'px';
bg.style.width = moveX + 'px';
if(moveX >= wrapper.offsetWidth - this.offsetWidth ){
flag = true;
text.innerText = '通过验证';
text.style.color = '#fff';
spanBox.setAttribute("class",classVal );//添加正确通过的icon类
this.onmousemove = null;//移除移动事件
this.onmousedown = null;//移除鼠标按下事件
}
}
}
};
//松开
dropBox.onmouseup = function(event){
this.onmousemove = null;
if(flag) return;
this.style.left = 0;
bg.style.width = 0;
}
}