缓动框架封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400</button>
    <button>宽度变为400</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            animate(div,"left",400);
        }

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


        //参数变为3个
        function animate(ele,attr,target){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //四部
                var leader = parseInt(getStyle(ele,attr)) || 0;
                //1.获取步长
                var step = (target - leader)/10;
                //2.二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //3.赋值
                ele.style[attr] = leader + "px";
                 //4.清除定时器
                if(Math.abs(target-leader)<=Math.abs(step)){
                    ele.style[attr] = target + "px";
                    clearInterval(ele.timer);
                }

            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>


</body>
</html>
 <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json = {"left":10,"top":200,"width":300,"height":200};
            animate(div,json);
        }



        //参数变为3个
        function animate(ele,json){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //遍历属性和值,分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    console.log(1);
                    //4.清除定时器
//                    if(Math.abs(json[k]-leader)<=Math.abs(step)){
//                        ele.style[k] = json[k] + "px";
//                        clearInterval(ele.timer);
//                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>
 <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json = {"left":10,"top":200,"width":300,"height":200};
            animate(div,json);
        }



        //参数变为3个
        function animate(ele,json){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值,分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长,就不能跳出循环
                    //不考虑小数的情况:目标位置和当前位置不相等,就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置,bool值才不会变成false;
                if(bool){
                    clearInterval(ele.timer);
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>

    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json1 = {"left":300,"top":200,"width":300,"height":200};
            var json2 = {"left":10,"top":30,"width":100,"height":100};
            animate(div,json1, function () {
                animate(div,json2, function () {
                    animate(div,json1);
                });
            });

        }



        //参数变为3个
        function animate(ele,json,fn){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值,分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长,就不能跳出循环
                    //不考虑小数的情况:目标位置和当前位置不相等,就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置,bool值才不会变成false;
                if(bool){
                    clearInterval(ele.timer);
                    //所有程序执行完毕了,现在可以执行回调函数了
                    //只有传递了回调函数,才能执行
                    if(fn){
                        fn();
                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>

推荐阅读更多精彩内容