原生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意见,同你分享!昵称同微信,欢迎探讨交流。

你可能感兴趣的:(javascript,回调函数,多属性运动封装)