JavaScript动画4-任意属性值

系列文章导航

JavaScript动画1-速度动画
JavaScript动画2-缓冲运动
JavaScript动画3-多物体运动
JavaScript动画4-任意属性值
JavaScript动画5-链式运动
JavaScript动画6-同时运动
所有源代码

在介绍任意属性值之前，先说一个潜在的问题。之前我们几篇JavaScript动画中使用的例子，里面的元素都是没有边框的，即border为0，所以offsetWidth就等于元素的width，但实际上，offsetWidth=width+左边框+右边框。所以如果我们要对一个有边框的元素使用前面的动画方法，就会出现问题。

那有没有什么办法获得元素的width，而不包括左右边框呢？

有！

function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[attr];
    } else if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
}

我封装了一个getStyle函数。该函数的具体讲解请看这里http://www.jianshu.com/p/de893f7e6143 。这里就不赘述了。总之你不能通过obj.style.width来获取元素的实际宽度。

按照这样的写法，前面第一篇《JavaScript动画3-多物体运动》中的例子应该改为：

(function () {
            ...
            function startMove(obj, targetWidth) {
                ...
                obj.timer = setInterval(function () {
                    var speed = (targetWidth - parseInt(getStyle(obj,'width'))) / 10; //缓冲运动
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (parseInt(getStyle(obj,'width')) == targetWidth) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = parseInt(obj,'width') + speed + 'px';
                    }
                }, 20);
            }
        })();

任意属性值

上面的代码只能改变元素的width实现动画，如果我们想要改变元素的height属性，就不得不重新写一份代码，将startMove函数中的width改成height。这样非常麻烦，因为其他代码都是类似的。所以我们可以将不同的部分当做参数传进去。我们来实现一下。

HTML代码结构如下：

<div id="div6">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

JavaScript代码如下：

//任意属性参数
        (function () {
            var lists = document.getElementById("div6").getElementsByTagName("li");
            for (var i = 0; i < lists.length; i++) {
                lists[i].timer = null; //给每个元素设置一个单独的定时器
            }

            lists[0].onmouseover = function () {
                startMove(this, 'width', 600);
            };

            lists[0].onmouseout = function () {
                startMove(this, 'width', 200);
            };
            lists[1].onmouseover = function () {
                startMove(this, 'height', 400);
            };

            lists[1].onmouseout = function () {
                startMove(this, 'height', 100);
            };

            function startMove(obj, attr, targetValue) {
                if (obj.timer) {
                    clearInterval(obj.timer);
                }
                obj.timer = setInterval(function () {
                    var currentValue = parseInt(getStyle(obj, attr));

                    var speed = (targetValue - currentValue) / 10; //缓冲运动
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (currentValue == targetValue) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style[attr] = currentValue + speed + 'px';
                    }
                }, 20);
            }
        })();

其中，startMove函数多了一个参数attr，用于指定改变width还是height。

但上面的代码还是有问题，当我们传进去一个opacity属性的时候，上面的代码就不能正常工作了。因此我们需要在startMove函数中进行判断：如果是opacity，则另外进行处理。

因为可以处理透明度了，所以我们把startMove函数改名为change。

(function () {
    var lists = document.getElementById("div6").getElementsByTagName("li");
    for (var i = 0; i < lists.length; i++) {
        lists[i].timer = null; //给每个元素设置一个单独的定时器
    }

    lists[0].onmouseover = function () {
        change(this, 'width', 600);
    };

    lists[0].onmouseout = function () {
        change(this, 'width', 200);
    };
    lists[1].onmouseover = function () {
        change(this, 'opacity', 60);
    };

    lists[1].onmouseout = function () {
        change(this, 'opacity', 100);
    };

    lists[2].onmouseover = function () {
        change(this, 'height', 400);
    };

    lists[2].onmouseout = function () {
        change(this, 'height', 100);
    };

    function change(obj, attr, targetValue) {
        if (obj.timer) {
            clearInterval(obj.timer);
        }

        obj.timer = setInterval(function () {
            var currentValue = 0;
            if (attr == 'opacity') {
                currentValue = Math.round((parseFloat(getStyle(obj, attr)) * 100));
            } else {
                currentValue = parseInt(getStyle(obj, attr));
            }

            var speed = (targetValue - currentValue) / 10; //缓冲运动
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (currentValue == targetValue) {
                clearInterval(obj.timer);
            } else {
                if (attr == 'opacity') {
                    obj.style.opacity = (currentValue + speed) / 100;
                } else {
                    obj.style[attr] = currentValue + speed + 'px';
                }
            }
        }, 20);
    }
})();

最后完成的效果如下：

JS动画演示8