Javascript实现弹性抛物运动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前端ABC-qdabc.cn</title>
    <style>
        div{width:100px; height:100px; background:orangered; position:absolute;}
        
    </style>
    <script>
        function crashNdrag(id,l){
            var oDiv  =document.getElementById(id),
                    ySpeed= 0,
                    xSpeed= 0,
                    lasty= 0,
                    lastx= 0,
                    left= 0,
                    top= 0,
                    position=[];
            oDiv.onmousedown=function(ev){
                clearInterval(oDiv.timer);
                var oEvent = ev||event;
                var disx=oEvent.clientX-oDiv.offsetLeft;
                var disy=oEvent.clientY-oDiv.offsetTop;
                oDiv.timer2=setInterval(function(){
                ySpeed=lasty-position[0];
                xSpeed=lastx-position[1];
                position[0]=lasty;
                position[1]=lastx;
                },30);
                document.onmousemove=function(ev){
                    var oEvent = ev||event;
                    console.log(oEvent);
                    oDiv.style.left=oEvent.clientX-disx+'px';
                    oDiv.style.top=oEvent.clientY-disy+'px';
                    lasty=oEvent.clientY;
                    lastx=oEvent.clientX;
                    limit(oDiv,l)
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                    clearInterval(oDiv.timer2);
                    move(oDiv,l);
                    oDiv.releaseCapture&&oDiv.releaseCapture();
                };
                oDiv.setCapture&&oDiv.setCapture();
                return false;
            };
            function limit(obj,limit){
                limit=limit||[0,document.documentElement.clientHeight,0,document.documentElement.clientWidth];
                if(obj.offsetTop<limit[0]){
                    obj.style.top=limit[0]+'px'
                }
                if(obj.offsetTop>limit[1]-obj.offsetHeight){
                    obj.style.top=limit[1]-obj.offsetHeight+'px'
                }
                if(obj.offsetLeft<limit[2]){
                    obj.style.left=limit[2]+'px'
                }
                if(obj.offsetLeft>limit[3]-obj.offsetWidth){
                    obj.style.left=limit[3]-obj.offsetWidth+'px'
                }
            }
            function move(obj,limit){
                clearInterval(obj.timer);
                limit=limit||[0,document.documentElement.clientHeight,0,document.documentElement.clientWidth];
                obj.timer=setInterval(function(){
                    ySpeed+=4;
                    top=obj.offsetTop+ySpeed;
                    left=obj.offsetLeft+xSpeed;
                    if(top<limit[0]){
                        top=limit[0];
                        ySpeed*=-0.8;
                        xSpeed*=0.8
                    }
                    if(top>limit[1]-obj.offsetHeight){
                        top=limit[1]-obj.offsetHeight;
                        ySpeed*=-0.8;
                        xSpeed*=0.8
                    }
                    if(left<limit[2]){
                        left=limit[2];
                        xSpeed*=-0.8;
                        ySpeed*=0.8
                    }
                    if(left>limit[3]-obj.offsetWidth){
                        left=limit[3]-obj.offsetWidth;
                        xSpeed*=-0.8;
                        ySpeed*=0.8
                    }
                    if(Math.abs(xSpeed)<1)xSpeed=0;
                    if(Math.abs(ySpeed)<1)ySpeed=0;
                    obj.style.top=top+'px';
                    obj.style.left=left+'px';
                    if(Math.round(obj.offsetTop)==limit[1]-obj.offsetHeight&&xSpeed==0&&ySpeed==0){
                        clearInterval(obj.timer)
                    }
                },30)
            }
        }
        window.onload=function(){
            crashNdrag('div')
        }
    </script>
</head>
<body>
<div id="div"></div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » Javascript实现弹性抛物运动

赞 (3)
分享到:更多 ()

发表评论 1

  1. 匿名学习了回复