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

ゝ一世哀愁。 2021-12-07 11:49 333阅读 0赞

<!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>