定时器动画

最新推荐文章于 2022-09-21 10:19:59 发布

Kk-87

最新推荐文章于 2022-09-21 10:19:59 发布

阅读量386

点赞数

分类专栏： js 文章标签： javascript 动画

本文链接：https://blog.csdn.net/qq_36712191/article/details/64443857

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用定时器做动画的元素需要相对或绝对定位;

通过改变元素的边距使元素移动:

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: royalblue;
        position: relative;
    }
</style>

<input type="button" value="go400" id="btn1"/>
<input type="button" value="go800" id="btn2"/>
<div class="box"></div>

    //    获取对象
    var btn1 = document.querySelector('#btn1');
    var box = document.querySelector('.box');

    //    添加事件
    btn1.addEventListener('click', function () {
        animate(box, 500);
    });

    /**
     * js简单动画
     * @param { element: DOM }   作动画的元素
     * @param { target: number } 移动距离
     */
    function animate(element, target) {

//        如果存在已经开启的定时器,先关闭
        if (element.timer) {
            clearInterval(element.timer);
        }

        element.timer = setInterval(function () {
//            左边距
            var leader = element.offsetLeft;
            console.log(leader);
//            每次移动的距离
            var step = 10;
            if (target < leader) {
                step = -step;
            }
            var distance = Math.abs(target - leader);
            if (distance >= Math.abs(step)) {
                leader = leader + step;
                element.style.left = leader + "px";
            } else {
                clearInterval(element.timer);
                element.style.left = target + "px";
            }
        }, 15);
    }

利用定时器做动画的元素需要相对或绝对定位;

通过改变元素的边距使元素移动:

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: royalblue;
        position: relative;
    }
</style>

<input type="button" value="go400" id="btn1"/>
<input type="button" value="go800" id="btn2"/>
<div class="box"></div>

    //    获取对象
    var btn1 = document.querySelector('#btn1');
    var box = document.querySelector('.box');

    //    添加事件
    btn1.addEventListener('click', function () {
        animate(box, 500);
    });

    /**
     * js简单动画
     * @param { element: DOM }   作动画的元素
     * @param { target: number } 移动距离
     */
    function animate(element, target) {

//        如果存在已经开启的定时器,先关闭
        if (element.timer) {
            clearInterval(element.timer);
        }

        element.timer = setInterval(function () {
//            左边距
            var leader = element.offsetLeft;
            console.log(leader);
//            每次移动的距离
            var step = 10;
            if (target < leader) {
                step = -step;
            }
            var distance = Math.abs(target - leader);
            if (distance >= Math.abs(step)) {
                leader = leader + step;
                element.style.left = leader + "px";
            } else {
                clearInterval(element.timer);
                element.style.left = target + "px";
            }
        }, 15);
    }