JavaScript动画--水平运动和透明度-原创手记-慕课网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平运动-透明度</title>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
div {
    width: 200px;
    height: 200px;
    background: #9FF;
 filter:Alpha(opacity:30);
    opacity: 0.3;
    position: relative;
    top: 0;
    left: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px dotted #0F0;
}
#div6, #div7, #div8 {
    top: 220px;
    background: yellow;
    float: none;
 filter:Alpha(opacity:100);
    opacity: 1;
    border: 1px dotted #999;
}
div span {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 50px;
    padding: 25px;
    color: #99F;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
}
#div6 span, #div7 span, #div8 span {
    color: #3FF;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var ODivList = document.getElementsByName('row');
    for (var i = 0; i < ODivList.length; i++ ){
        ODivList[i].timer = null;
        ODivList[i].alpha = 30;
        ODivList[i].onmouseover= function(){
            move(this,'opacity',100);
        }
        ODivList[i].onmouseout = function(){
            move(this,'opacity',30);
        }   
    }

 var ODivListCol = document.getElementsByName('col');
    for (var i = 0; i < ODivListCol.length; i++ ){
        ODivListCol[i].timer = null;
        ODivListCol[i].onmouseover= function(){
            move(this,'width',1088);

        }
        ODivListCol[i].onmouseout = function(){
            move(this,'width',200);

        }   
    }
}

function move(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var curWidth =0;
        if(attr == 'opacity'){
            curWidth = Math.round(parseFloat(getStyle(obj,attr))*100);  
        }else{
            curWidth = parseInt(getStyle(obj,attr));
        }
        var speed = (iTarget - curWidth)/5;
        speed = (speed > 0 ? Math.ceil(speed):Math.floor(speed)); 
        if(curWidth == iTarget){
            clearInterval(obj.timer);
        }else{
            if(attr == 'opacity'){
                obj.style[attr] = (curWidth + speed)/100;   
                obj.style[attr] = 'Alpha(opacity:' + (curWidth + speed) + ')';  

            }else{
                obj.style[attr] = curWidth + speed +'px';
            }           

        }
    },30);
}

function getStyle(obj,attr){
    if(obj.curentStyle){//IE
        return obj.currentStyle[attr];
    }else{//firefox
        return getComputedStyle(obj,false)[attr];
    }
}
</script>
</head>

<body>
<div id="div1" name="row"><span>One</span></div>
<div id="div2" name="row"><span>Two</span></div>
<div id="div3" name="row"><span>Three</span></div>
<div id="div4" name="row"><span>Four</span></div>
<div id="div5" name="row"><span>Five</span></div>
<div id="div6" name="col"><span>One</span></div>
<div id="div7" name="col"><span>Two</span></div>
<div id="div8" name="col"><span>Three</span></div>
</body>
</html>