<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码</title>
<style>
.father{
width: 400px;
height: 50px;
background-color: red;
margin: 300px auto;
position: relative;
}
.son{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40px;
background-color: purple;
}
.mask{
width: 0;
height: 100%;
background-color: #336699;
/*position: absolute;
top: 0;
left: 0;*/
}
</style>
<script src="../public.js"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="mask"></div>
</div>
</body>
<script>
var father=document.querySelector(".father")
var son=document.querySelector(".son")
var mask=document.querySelector(".mask")
addEvent(son,"mousedown",down)
function down(eve) {
var e1=eve||window.event;
var leftVal = e1.clientX - son.offsetLeft;
console.log(e1.clientX)//第一次按下去，鼠标相对于可是页面的X，是一直不会变化的。
console.log(son.offsetLeft)//son相对于包含快的距离；
addEvent(document,"mousemove",move)
function move(eve) {
var e2=eve||window.event
console.log(e2.clientX)
son.style.left=e2.clientX- leftVal +"px"
if(e2.clientX- leftVal<0){
son.style.left="0px"
}
else if(e2.clientX- leftVal>360){
son.style.left="360px"
}
mask.style.width = son.style.left;
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();//清除拖动，防止有时候鼠标弹起来还在拖动。
}
addEvent(document,"mouseup",up)
function up(eve) {
var e3=eve||window.event;
removeEvent(document,"mousemove",move)
}
}
</script>
</html>
长风破浪会有时，直挂云帆济沧海
