js实现简单的方块45度角移动

最新推荐文章于 2022-08-11 19:58:14 发布

Su__py

最新推荐文章于 2022-08-11 19:58:14 发布

阅读量717

点赞数

分类专栏：前端web 文章标签： css js

本文链接：https://blog.csdn.net/su__py/article/details/109957098

版权

前端web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>

<div class="box"></div>

<script>
        var box=document.querySelector(".box")
        function move(ele,target){
            let left=parseInt(getComputedStyle(ele)["left"]);
            let top=parseInt(getComputedStyle(ele)["top"]);
            // console.log(left,top);
            let speed=1;
            setTimeout(()=>{
                left+=speed;
                top+=speed;
                if(target===left){
                    console.log("移动完成");
                }else{
                    ele.style.left=left+"px";
                    ele.style.top=top+"px";
                    move(box,300);
                }  
            })
        }
        move(box,300);