js运动的简洁版

浏览数：18 / 时间：2015年06月09日

<!Doctype html>
<html>
<head>
<style>
div{width:200px;height:200px;background:red;margin:30px;float:left;border:3px solid #fff;font-size:20px;filter:alpha(opacity:30);opacity:0.3}


</style>
<script>
/**
*获取属性
**/

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


}
window.onload=function(){
    var oDiv = document.getElementsByTagName("div")[0];

    oDiv.timer = null;
    oDiv.onmouseover = function(){   
　　　　 //只需传属性名称
        startMove(this,100,‘opacity‘);
　　　　　　
        
    }
    oDiv.onmouseout = function(){    
        startMove(this,30,‘opacity‘);
        
    }
    
}


function startMove(obj,iTarget,name){
    clearInterval(obj.timer);

    obj.timer = setInterval(function(){
            //获取属性的值
            var value =0;
            if(name == ‘opacity‘){
                value = Math.round(parseFloat(getStyle(obj,name))*100);
            }else{
                value = parseInt(getStyle(obj,name));
            }


        speed = (iTarget - value)/6;

        speed =  speed>0 ? Math.ceil(speed):Math.floor(speed);
        if(Math.abs(iTarget - value)<6){
            clearInterval(obj.timer);
            if(name==‘opacity‘){
                obj.style.filter = "alpha(opacity:"+iTarget+")";
                obj.style.opacity = iTarget/100;
            }else{
                obj.style[name] = iTarget;
            }
            

        }else{
            
            if(name == ‘opacity‘){
                obj.style.filter = "alpha(opacity:"+(value+speed)+")";
                obj.style.opacity = (value+speed)/100;
            }else{
            obj.style[name] = value+speed+"px";
            }        
        
        }
    
    },30)



}

</script>
</head>
<body>

<div>我变</div>
</body>
</html>