原生js实现一个DIV的碰撞反弹运动

2018-06-29 06:39:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

 原生js实现一个DIV的碰撞反弹运动:

  关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;}
        div{height:100px;width:100px;background:red;position:absolute;}
        /*添加绝对定位*/

    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var div=document.getElementById("div");
            var speedx=6;
            var speedy=8;
            var t=null;
            btn.onclick=function(){
                clearInterval(t);
                t=setInterval(function(){
                    var l=div.offsetLeft+speedx;
                    var t=div.offsetTop+speedy;

                    if(l>=document.documentElement.clientWidth-div.offsetWidth){
                        speedx*=-1;
                        l=document.documentElement.clientWidth-div.offsetWidth;
                    }else if(l<=0){
                        speedx*=-1;
                        l=0;
                    }
                    if(t>=document.documentElement.clientHeight-div.offsetHeight){
                        speedy*=-1;
                        t=document.documentElement.clientHeight-div.offsetHeight;
                    }else if(t<=0){
                        speedy*=-1;
                        t=0;
                    }
                    div.style.left=l+"px";
                    div.style.top=t+"px";
                },10);
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="开始运动">
<div id="div"></div>
</body>
</html>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于Vue中:key=&quot;index&quot;的console警告

下一篇:前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack