原生Js深度解析封装运动函数思想

（1）简单封装运动函数（宽，高，左，右）

//第一步
        //首先封装不同兼容性下获取style样式属性
        function getStyle(domobj, attr) {
            if (window.getComputedStyle) {//搜狐谷歌
                return getComputedStyle(domobj, null)[attr]
            } else {//IE
                return domobj.currentStyle[attr]
            }
        }
        //第二步
        //封装运动函数
        function Move(domobj, json) {
            //默认flag为true,下面做判断要用；
            var flag = true;
            //开始首先清除定时器，不懂看我之前关于分析定时器的帖子。
            clearInterval(domobj.timer);
            domobj.timer = setInterval(function () {
                for (var attr in json) {
                    //获取目标值
                    var target = json[attr];
                    //获取初始设置值
                    //转换成数字，因为可能会带px值；
                    var value = Math.floor(getStyle(domobj, attr));
                    //定时器每运行一次获取的距离
                    var ispeed = (target - value) / 8;
                    //判断距离的正负，大于0向下取整，小于0，向上取整；
                    ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
                    //设置style的样式
                    domobj.style[attr] = value + ispeed + 'px'
                }
                //判断是否到达临界值:即初始值和目标值相等
                if (value !== target) {
                    flag = false;
                }
                //当两值相等时，清除定时器
                if(flag){
                    clearInterval(domobj.timer)
                }
            }, 20)
        }
        

优化多属性封装运动函数（宽高左右+透明度+回调函数）

关于透明度，下面之所以*100是因为初始值为0~1，所以先扩大范围。而获取目标值透明度传入

1~100方便下面进行计算

 function Move(domobj, json, fn) {
            //默认flag为true,下面做判断要用；
            var flag = true;
            //开始首先清除定时器，不懂看我之前关于分析定时器的帖子。
            clearInterval(domobj.timer);
            domobj.timer = setInterval(function () {
                for (var attr in json) {
                    //获取目标值
                    var target = json[attr];
                    //获取初始设置值
                    //转换成数字，因为可能会带px值；
                    //判断属性里是否含有opacity,有则获取值*100再向下取整
                    if (attr === 'opacity') {
                        var value = Math.floor(getStyle(domobj, attr) * 100)
                    } else {
                        //获取除透明度外初始设置值
                        var value = Math.floor(getStyle(domobj, attr));
                    }
                    //定时器每运行一次获取的距离
                    var ispeed = (target - value) / 8;
                    //判断距离的正负，大于0向下取整，小于0，向上取整；
                    ispeed = ispeed > 0 ? ispeed = Math.floor(ispeed) : ispeed = Math.ceil(ispeed);
                    //设置style的样式
                    //两种情况，第一种透明度不加px,其他加px;
                    if (attr === 'opacity') {
                        domobj.style[attr] = value + ispeed;
                    }
                    domobj.style[attr] = value + ispeed + 'px';
                }
                //判断是否到达临界值:即初始值和目标值相等
                if (value !== target) {
                    flag = false;
                }
                //当两值相等时，清除定时器
                if (flag) {
                    clearInterval(domobj.timer);
                    if (fn) {//fn为回调函数，当运动到终点的时候执行这个函数//下面有例子会应用。
                        fn()
                    }
                }
            }, 20)
        }

使运动依此进行；如：先变宽再边长或先右移动再左移动（利用回调函数）

下面运动为先宽，再高，再向下移动，最后向左移动

fn为回调函数，当运动到终点的时候会执行这个函数。

流程为：第一次调用（加宽+添加回调函数（

第二次调用（加高+添加回调函数（

第三次调用：向下移动+添加回调函数（

第四次调用（向右移动且不添加回调函数） ）））））

如果想使效果同时出现，全部写在第二个对象中，调用一次即可。

 odiv.onmousemove = function () {
            setMove(odiv, {
                width: 300,
            }, function () {
                setMove(odiv, { height: 300, }, function () {
                    setMove(odiv, { top: 300, }, function () {
                        setMove(odiv, {
                            left: 300,
                        })
                    })
                })
            })
        }

ZW意见，同你分享！昵称同微信，欢迎探讨交流。