美文网首页
自己封装简单的运动效果

自己封装简单的运动效果

作者: Lamport | 来源:发表于2017-01-10 18:13 被阅读0次
    /**
     * 运动函数简单封装
     * @param obj   要操作的对象
     * @param json  存放要改变的属性和目标值
     * @param fn    回调函数,在前面的运动效果执行完之后,才回执行的函数
     */
    function motion(obj, json,fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 当开关变量结果为true时,表示所有动作执行完毕,可以停止定时器,调用回调函数了
            var onOff = true;
            for ( var attr in json ){
                var current = null;
                // 获取当前值
                if (attr = "opacity") {
                    current = parseInt(getStyle(obj, attr)) * 100;
                } else {
                    current = parseInt(getStyle(obj, attr));
                };
                // 计算速度
                var speed = ( json[attr] - current ) / 7;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // 如果目标值和当前值不相等  继续for循环
                if (json[attr] != current) {
                    flag = false;
                };
                if (attr = "opacity") {
                    obj.style.opacity = ( current + speed ) / 100;
                    obj.style.filter = "alpha(opacity = " + ( current + speed ) + ")";
                } else if (attr == "zIndex"){
                    obj.style.zIndex = json[attr];
                }else {
                    obj.style[attr] = current + speed + "px";
                };
            };
            // 判断开关变量的停止条件
            if( onOff ){
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                };
            };
        }, 50);};
    /**
     * 获取非行内CSS样式
     * @param obj   要获取的对象
     * @param attr  要获取的属性
     * @returns {Number}
     */
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj.false)[attr];
        } else {
            return obj.currentStyle[attr];
        };
    };
    

    相关文章

      网友评论

          本文标题:自己封装简单的运动效果

          本文链接:https://www.haomeiwen.com/subject/evflbttx.html