<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽验证</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
cursor: pointer;
margin: 50px auto;
height: 40px;
width: 300px;
line-height: 40px;
text-align: center;
position: relative;
background-color: #e8e8e8;
}
.rec {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #00b894;
}
.rect {
position: relative;
width: 300px;
height: 100%;
}
.silde {
position: absolute;
height: 100%;
width: 40px;
background: white;
left: 0;
border: 1px solid #CCCCCC;
top: 0;
}
.silde img{
width: 100%;
}
a{
width: 40px;
height: 100%;
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<a></a>
<div class="rec">
<div class="rect">
拖拽验证
<div class="silde">
<p>>></p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 获取元素节点
var box = document.querySelector('.box')
var rec = document.querySelector('.rec')
var rect = document.querySelector('.rect')
var silde = document.querySelector('.silde')
var p = document.querySelector('p')
var a = document.querySelector('a')
// 定义一个X坐标轴的全局变量
var changeX
// 点击进行拖拽
silde.onmousedown = function(e) {
// 记录点击时的X坐标
var initX = e.clientX
console.log(initX)
// 鼠标移动事件
document.onmousemove = function(e) {
// 记录移动时的X坐标
var moveX = e.clientX
// 计算差值
changeX = moveX - initX
console.log(changeX)
// 判断差值范围
if (changeX < 0) {
changeX = 0
}
if (changeX > 260) {
changeX = 260
console.log("到底啦")
}
silde.style.left = changeX +'px'
rec.style.width = changeX + 'px'
if(changeX>=260){
// 阻止点击和移动事件发生
document.onmousemove = null
silde.onmousedown = null
rec.style.color = 'white'
rec.innerHTML = '验证成功'
silde.style.background = '#FF0000'
a.style.display='block'
a.innerHTML = '√'
alert("验证成功")
}
document.onmouseup = function(){
document.onmousemove = null
if(changeX<260){
silde.style.left = 0
rec.style.width = 0
}
}
}
}
</script>