*{
margin: 0;
padding:0;
}
.container{
width: 270px;
height: 35px;
z-index: 1;
background: #ccc;
margin: 50px 200px;
position: relative;
}
.btn{
width: 35px;
height: 100%;
z-index: 999;
position: absolute;
background: pink;
cursor: move;
left: 0;
}
.test{
position: absolute;
width: 100%;
height: 100%;
line-height: 35px;
letter-spacing: 15px;
text-align: center;
user-select: none;
}
.bg{
width: 35px;
top:0;
position: absolute;
height: 100%;
background: skyblue;
}
h2{
position: absolute;
top:100%;
}
0%
let $=e=>{return document.querySelector(e)},c=c=>{console.log(c)};
// 写一个类似于jq的$选择器
let btn=$('.btn'),container=$('.container'),test=$('.test'),bg=$('.bg'),success=false,h=$('h2');
// success用来记录当前是否验证成功
window.onload=e=>{
// 当加载完毕后
btn.onmousedown=e=>{
// btn鼠标按下时触发
btn.style['transition']='0s';
bg.style['transition']='0s';
c('开始移动');
let offsetX=e.clientX;
// 按下时鼠标距离页面左的距离
document.onmousemove=event=>{
event.preventDefault();
// 阻止默认行为
let x=event.clientX-offsetX;
// 鼠标在内部距离=当前移动中的鼠标距离-按下时候的距离
offsetRight=btn.offsetLeft+btn.offsetWidth;
// btn最右边的距离=btn元素边框外侧到body内侧的距离+btn宽度值
let maxLeft=container.offsetWidth-btn.offsetWidth;
// 容器内最大距离
offsetRight=Math.ceil((offsetRight/container.offsetWidth)*100)+'%'
// 求出当前移动距离在容器内的百分比
h.innerHTML=offsetRight;
// 输出到h2当中
if(x<0) x=0;
if(x>maxLeft) x=maxLeft;
if(x==maxLeft){
// 如果成功则将当前页面中的onmouseup和onmousemove清空
success=true;
test.innerHTML='验证成功';
bg.style['background']='rgb(128, 250, 91)';
document.onmouseup=null;
document.onmousemove=null;
setTimeout(function(){
alert('验证成功')
},200)
}
btn.style['left']=x+'px';
bg.style['width']=x+35+'px';
// 这里是将当前背景值多添加35,是因为btn的宽度也是35px,为了能够盖满宽度
}
}
document.addEventListener('mouseup',e=>{
if(success){
return
// 成功则不做
}else{
btn.style['left']='0px';
bg.style['width']='0px';
h.innerHTML=offsetRight;
btn.style['transition']='1s ease';
bg.style['transition']='width 1s ease';
h.innerHTML='0%'
}
document.onmouseup=null;
document.onmousemove=null;
})
}
——————————————————写的不好,仅供参考