原生js自定义动画

最新推荐文章于 2022-04-29 21:23:35 发布

阿柒的以气驭剪

最新推荐文章于 2022-04-29 21:23:35 发布

阅读量390

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45906680/article/details/124184063

版权

这篇博客介绍了如何创建HTML容器和DOM元素，并通过CSS设置相对和绝对定位。接着，利用JavaScript编写了一个名为`move`的函数，该函数用于使DOM元素在指定范围内按指定步长动态移动。通过调整步长和判断条件，实现了元素在容器内的往返移动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建容器与dom元素

 <!-- 容器 -->
    <div id="body">
        <!-- 需要运动的dom元素 -->
        <div id="box"></div>
    </div>

2、为容器和dom元素添加相对定位与绝对定位

  #body {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }

        #box {
            width: 120px;
            height: 120px;
            background: green;
            position: absolute;
        }

3、操作dom 的js代码

 var box = document.getElementById("box");

        function move(el, stepx, stepy) {
            //el--需要操作的dom元素,setpx--横向移动像素,setpy--纵向移动步数

            return setInterval(() => {//返回一个变量 用于清除定时器

                // 目前位置(offsetLeft与offsetTop只读)
                let initx = parseInt(el.offsetLeft);
                let inity = parseInt(el.offsetTop);

                //改变位置
                el.style.left = stepx + initx + "px"
                el.style.top = inity + stepy + "px"

                // 规定运动范围50xp之内，通过改变step使dom元素来回移动
                if (initx > 50) {
                    stepx = -1;
                } else if (initx == 0) stepx = 1.5;

                if (inity > 50) {
                    stepy = -1;
                } else if (inity == 0) stepy = 1;
            }, 1000 / 40);// 每秒 40 帧
        }

        move(box, 1, 1)