js实现多物体不同运动框架

欢迎各位亲们赏脸观看 * _ *

我们都知道，网站中有很多的运动，其需求不同，但大体结构类似。如果我们把每个功能模块都写出来，不仅浪费时间，而且浪费很多代码空间，增加代码冗余，使代码显得杂乱无章。
今天我们就来写一个框架，将不同的运动封装成一个方法，让不同的运动共用这一个方法，节省时间、空间。而且，这个框架一旦完成，无论何时想用，只要一个调用，就可以实现。
这个方法能实现的运动有变宽、变高、变字体大小、变透明度、变边框等等，基本上给标签添加的样式，用这个方法都能让他做出对应的改变。
下面就和我一起进入代码空间吧，相信你一定会有很大的收获-->

// 获取当前样式
function getStyle(obj, name){
    //解决获取当前样式在不同浏览器上的兼容问题
    if(obj.currentStyle){
        //IE7以下低版本浏览器
        return obj.currentStyle[name]
    }else{
        //火狐谷歌等高版本浏览器
        return getComputedStyle(obj, false)[name];
    }
}
var timer = null;//创建定时器
function startMove(obj, attr, target) {
    clearInterval(obj.timer);//清除旧定时器
    obj.timer = setInterval(function () {
        var curStyle = 0;
        //单独处理透明度样式
        if (attr == 'opacity') {
            curStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        } else {
            //除透明度以外，其他样式
            curStyle = parseInt(getStyle(obj, attr));
        }
        //获取当期速度，并将其取整，避免不能精准到达指定位置
        var speed = (target - curStyle) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (curStyle == target) {
            clearInterval(timer);//到达位置停止定时器
        } else {
            if (attr == 'opacity') {//改变透明度的样式
                obj.style.filter = 'alpha(opacity:' + (curStyle + speed) + ')';
                obj.style.opacity = (curStyle + speed) / 100;
            } else {//改变除透明度以外的其他样式
                obj.style[attr] = curStyle + speed + 'px';
            }
        }
    });
}

以上代码基本上适合所有运动，只要调用startMove方法，并给他传上参数，就能实现你想要的简单运动。

有兴趣的小伙伴抓紧试试吧 ! =_=