js缓动动画及其封装

最新推荐文章于 2023-06-06 21:03:03 发布

约德尔蒙

最新推荐文章于 2023-06-06 21:03:03 发布

阅读量389

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242547

版权

Js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>

<script>

//----------------------------js缓动动画----------------------------
    var　btn = document.getElementsByTagName("button");
    var　div = document.getElementsByTagName("div")[0];


    btn[0].onclick = function () {
        animate(div,200);
    }

    btn[1].onclick = function () {
        animate(div,400);
    }

    //缓动动画封装
    function animate(ele,target) {
        //要用定时器，先清定时器
        //一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {
            //获取步长
            //步长应该是越来越小的，缓动的算法。
            var step = (target-ele.offsetLeft)/10;
            //对步长进行二次加工(大于0向上取整,小于0项下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            //检测缓动动画有没有停止
            console.log(1);
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                //处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30);
    }
</script>
</body>
</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js缓动动画及其封装

Title div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; } 运动到200运动到400
复制链接

扫一扫

专栏目录