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

最新推荐文章于 2022-12-13 13:13:24 发布

霜如明月

最新推荐文章于 2022-12-13 13:13:24 发布

阅读量850

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/q3254421/article/details/83450317

版权

JavaScript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

原生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;//前端全栈学习交流圈：866109386
            var speedy=8；//面向1-3年前端开发人员
            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>

霜如明月

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现一个DIV的碰撞反弹运动

原生js实现一个DIV的碰撞反弹运动：关键在于DIV的边界检测，进而改变运动方向，即可实现碰撞反弹效果。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &a
复制链接

扫一扫