JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）

分享一下之前做的渐变效果（由于最近正好处于温故而知新状态，所以整理以前的po上来的随笔会比较多。

通过js实现的。

传递给函数的内容主要有，需要改变的对象、改变的属性、目标值、以及是否有回调函数。

可以实现物体的不同样式的链式变化，和不同样式的同时变化。

 

废话不多说，贴上Js代码（附上注释）：

<script>
//获取obj样式为attrs的值
function getStyle(obj,attrs){
    //IE
    if(obj.currentStyle){
        return obj.currentStyle[attrs];
    }
    //其他
    else{
        return getComputedStyle(obj,false)[attrs];
    }
}


//obj:对象，iTarget:变化目标,attrs:变化的属性
function startMove(obj,json,fn){
    var flag = true;
    //停止计时器
    clearInterval(obj.timer);
    //开始计时器
    obj.timer = setInterval(function(){
        for(var attrs in json){
            //获取到的对应的属性的值
            var Styles = getStyle(obj,attrs);
            //如果属性为透明度，取浮点数
            if(attrs == "opacity"){
                //Math.round四舍五入
                cur = Math.round(parseFloat(Styles)*100);
            }
            else{
                cur = parseInt(Styles);
            }
            //速度变量,缓冲变化
            var speed = (json[attrs] - cur)/8;
            //让speed为整数
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            
            //判断停止运动的位置
            if(cur != json[attrs]){
                flag = false;
            }
            //如果属性是透明度
            if(attrs == "opacity"){
                obj.style.filter = "alpha(opacity:"+(cur+speed)+")";
                obj.style.opacity = (cur+speed)/100;
            }
            else{
                obj.style[attrs] = cur+speed+"px";
            }
        }

        if(flag){
            clearInterval(obj.timer);
            //判断是否为链式运动，如果传了函数进来，则先执行函数
            if(fn){
                fn();
            }
        }

    }, 30)
}
</script>

 

效果图：

 

 

以上内容，如有错误请指出，不甚感激。