链式运动JavaScript实现

html代码

<div></div>
<div></div>
<div></div>
<div>你这一辈子有没有为别人拼过命</div>

css代码

  div {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 50px;
            opacity: 0.3;
        }

JS代码

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

    function move(obj, iTarget, attr, fn) {
        //1、关闭定时器
        clearInterval(obj.timer);
        //开启定时器
        obj.timer = setInterval(function () {
            //判断用户是否获取的透明度
            var iCur;
            if (attr == "opacity") {
                //parseInt:防止在IE出现闪烁问题
                iCur = parseInt(parseFloat(getStyle(obj, attr) * 100));
            } else {
                //将字符串转换为数字
                iCur = parseInt(getStyle(obj, attr));
            }
            //算速度
            var speed = (iTarget - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //判断
            if (iCur == iTarget) {
                clearInterval(obj.timer);
                fn && fn()
            } else {
                if (attr == "opacity") {
                    obj.style.opacity = (iCur + speed) / 100;
                    obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")";
                } else {
                    obj.style[attr] = iCur + speed + 'px';
                }
            }
        }, 30)
    }

    var aDiv = document.querySelectorAll("div");
    aDiv[0].onmouseover = function () {
        move(this, 300, "width", function () {
            move(aDiv[0], 300, "height")
        });
    };

    aDiv[1].onmouseover = function () {
        move(this, 300, "height");
    };

    aDiv[2].onmouseover = function () {
        move(this, 100, "opacity");
    };

    aDiv[3].onmouseover = function () {
        move(this, 60, "fontSize");
    }