<style>
        *{padding: 0; margin: 0;}
        div{width: 200px; height: 200px; background: red; margin: 20px; float: left; border: 10px solid #000; font-size: 14px;}
        #div4{filter: opacity(30);opacity: 0.3;}
    </style>

<script>
        window.onload=function(){
            var oDiv1=document.getElementById("div1");
            oDiv1.onmouseover=function(){
                startMove(this,'height',400);
            };
            oDiv1.onmouseout=function(){
                startMove(this,'height',200);
            };

            var oDiv2=document.getElementById("div2");
            oDiv2.onmouseover=function(){
                startMove(this,'width',400);
            };
            oDiv2.onmouseout=function(){
                startMove(this,'width',200);
            };

            var oDiv3=document.getElementById("div3");
            oDiv3.onmouseover=function(){
                startMove(this,'fontSize',50);
            };
            oDiv3.onmouseout=function(){
                startMove(this,'fontSize',14);
            };

            var oDiv4=document.getElementById("div4");
            oDiv4.onmouseover=function(){
                startMove(this,'opacity',100);
            };
            oDiv4.onmouseout=function(){
                startMove(this,'opacity',30);
            };
        }
        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name]; 
            }
        }
        function startMove(obj,attr,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var cur = 0;
                if(attr=="opacity"){
                    cur = Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                    cur = parseInt(getStyle(obj,attr));
                }
                var speed=(iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(attr=="opacity"){
                        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                        obj.style[attr]=(cur+speed)/100;
                        document.getElementById("txt1").value=obj.style[attr];
                    }else{
                        obj.style[attr]=cur+speed+"px";
                    }
                }
            },30);
        }
    </script>

<body>
<input type="text" id="txt1">
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">上来就开发了拉了两个</div>
<div id="div4">上来就开发了拉了两个</div>
</body>

赏
相关评论(0)
您是不是忘了说点什么？

友情提示：垃圾评论一律封号...

还没有评论，快来抢沙发吧！