验证码拖动！！！！！！！！待更新 

<!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>

 

posted @ 2019-08-29 17:40  菜鸟小何  阅读(161)  评论(0)  编辑  收藏  举报