javascript, 元素 页面 简单碰撞

Posted 洋葱头king

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript, 元素 页面 简单碰撞相关的知识,希望对你有一定的参考价值。

 <div>
    </div>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
---------------
 <script>
        let setDiv = document.querySelector("div");
        let divWidth = 100,
            divHeight = 100,
            divLeft = 0,
            divTop = 0;
        let vx = 6;
        let vy = 6;
        let timer = setInterval(() => {
            divLeft += vx;
            divTop += vy;
            setDiv.style.left = divLeft + "px";
            setDiv.style.top=divTop+"px";
            if (divLeft + divWidth >= innerWidth || divLeft <= 0) {
                vx = -vx;
            }
            if (divTop + divHeight >= innerHeight || divTop <= 0) {
                vy = -vy;
            }
        }, 25)
    </script>

以上是关于javascript, 元素 页面 简单碰撞的主要内容,如果未能解决你的问题,请参考以下文章

javascript运动系列第九篇——碰撞运动

javascript动画系列第三篇——碰撞检测

原生JS操作DOM

JavaScript 实现页面元素(ul-li)的简单排序

iOS状态栏点击上的Javascript事件

引导列元素调整大小碰撞到新行