动画录制

最新推荐文章于 2023-11-06 10:50:18 发布

keithzone

最新推荐文章于 2023-11-06 10:50:18 发布

阅读量174

点赞数

文章标签： js

本文链接：https://blog.csdn.net/keithzone/article/details/79797061

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div
        {
            width: 50px;
            height: 50px;
            background-color: dodgerblue;
            position: absolute;
        }
    </style>
    <script src="js/Drag.js"></script>
</head>
<body>
    <div></div>

<script>
    var div=document.getElementsByTagName("div")[0];
    var bool=false;
    var animationBool=false;
    var pointArr=[];
    Drag.start(div);
    div.addEventListener("mousedown",mouseHandler);
    div.addEventListener("mouseup",mouseHandler);
    function mouseHandler(e) {
        if(e.type==="mousedown"){
            bool=true;
        }else if(e.type==="mouseup"){
            bool=false;
            animationBool=true;
        }
    }

    setInterval(animation,16);
    function animation() {
        if(animationBool){
            if(pointArr.length===0)
            {
                animationBool=false;
                return;
            }
            var point=pointArr.shift();
            div.style.left=point.x+"px";
            div.style.top=point.y+"px";
        }
        if(!bool) return;
        pointArr.push({x:div.offsetLeft,y:div.offsetTop});

    }

</script>
</body>
</html>

JS样式

var Drag=(function () {
     return {
         start:function (elem,range) {
             elem.addEventListener("mousedown",mouseHandler);
             // elem.obj=this;
             var offsetPoint={};
             function mouseHandler(e) {
                 if(e.type==="mousedown"){
                    this.addEventListener("mouseup",mouseHandler);
                    window.addEventListener("mousemove",mouseHandler);
                    // maxDiv.style.display="block";
                     offsetPoint.x=e.offsetX;
                     offsetPoint.y=e.offsetY;
                 }else if(e.type==="mouseup"){
                     this.removeEventListener("mouseup",mouseHandler);
                     window.removeEventListener("mousemove",mouseHandler);
                     // maxDiv.style.display="none";
                 }else if(e.type==="mousemove"){
                    elem.style.left=e.clientX-offsetPoint.x+"px";
                    elem.style.top=e.clientY-offsetPoint.y+"px";
                    if(range){
                        if(elem.offsetLeft<=range.left){
                            elem.style.left=range.left+"px";
                        }
                        if(elem.offsetTop<=range.top){
                            elem.style.top=range.top+"px";
                        }
                        if(elem.offsetLeft>=range.left+range.width-elem.offsetWidth){
                            elem.style.left=range.left+range.width-elem.offsetWidth+"px";
                        }
                        if(elem.offsetTop>=range.top+range.height-elem.offsetHeight){
                            elem.style.top=range.top+range.height-elem.offsetHeight+"px";
                        }
                    }
                    var evt=new Event(Drag.ElEM_MOVE_EVENT);
                    evt.point= {x:elem.offsetLeft,y:elem.offsetTop};
                    elem.dispatchEvent(evt);
                 }
             }
         },
         ElEM_MOVE_EVENT:"ElemMovePointEvent"
         // bool:false
     }
})();