欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

封装变速动画函数

程序员文章站 2024-03-17 11:42:58
...

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #dv {
            width: 200px;
            height: 200px;
            background-color: cyan;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="btn">移动到400</button>
<button id="btn1">移动到800</button>
<script src="common.js"></script>
<div id="dv"></div>
<script>
    function f1(element,json,fn) {
        //清除定时器
        clearInterval(element.timeId)
        //添加定时器
        element.timeId=setInterval(function () {
            //假设到达目标位置
            var flag=true;
            for (var attr in json){
                //获取元素的当前位置
                var current = parseInt(getStyle(element,attr));
                //目标的值
                var target=json[attr];
                //移动的步数
                var step=(target-current)/10;
                //判断左右移动
                step=step>0?Math.ceil(step):Math.floor(step);
                //移动
                current+=step;
                //赋值
                element.style[attr]=current+"px";
                //如果有一个当前的位置,不等于目标位置,让flag=false
                if (current!=target){
                    flag=false
                }
            }
            //循环完后,如果flag为true, 这证明到达目标位置
            if (flag){
                clearInterval(element.timeId);
                //判断如果用户传了fn, 则调用
                if (fn){
                    fn();
                }
            }
        },20)
    }



    my$("btn").onclick = function () {
        f1(my$("dv"), {"width": 400, "height": 400, "left": 500, "top": 300}, function () {

            f1(my$("dv"), {"width": 30, "height": 30, "left": 600, "top": 400}, function () {

                f1(my$("dv"), {"width": 100, "height": 50, "left": 300, "top": 0})
            })
        })
    }
</script>
</body>
</html>