<center>JavaScript -运动-完美框架应用</center>-CSDN博客

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> p标签</title>
    <style type='text/css'>
        *{
            margin:0px;
            padding:0px;
        }
        li{
            width:200px;
            height:100px;
            margin:20px;
            list-style:none;
            background-color:yellow;
            opacity:0.3;
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var oLi=document.getElementsByTagName('li');
            for(var i=0;i<oLi.length;i++){
                oLi[i].onmouseover=function(){
                    var that=this;
                    startMove(this,{width:400,height:200},function(){
                        startMove(that,{opacity:100});
                    });
                }
                oLi[i].onmouseout=function(){
                    var that=this;
                    startMove(this,{height:100,width:200},function(){
                        startMove(that,{opacity:30})
                    });
                }
            }
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        function startMove(obj,json,fn){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                for(var attr in json){
                    var flag = true;
                    var icur=null;
                    if(attr=='opacity'){
                        icur=Math.round(parseFloat(getStyle(obj,attr))*100);
                    }
                    else{
                        icur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(json[attr]-icur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);

                    if(icur!=json[attr]){
                        flag = false;
                    }
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(icur+speed);
                        obj.style.opacity=(icur+speed)/100;
                    }
                    else{
                        obj.style[attr]=icur+speed+'px';
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                    if(fn) {
                        fn();
                    }
                }
            },30)
        }
    </script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>