motion6

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>
    window.onload=function(){
        var oDiv1=document.getElementById('div1')
        var oDiv2=document.getElementById('div2')
        var oDiv3=document.getElementById('div3')
        var oDiv4=document.getElementById('div4')
        var oDiv5=document.getElementById('div5')
        
        oDiv1.onmousemove=function(){
            startMover(this,'height',500)
        }
        oDiv1.onmouseout=function(){
            startMover(this,'height',200)
        }

        oDiv2.onmousemove=function(){
            startMover(this,'width',500)
        }
        oDiv2.onmouseout=function(){
            startMover(this,'width',200)
        }

        oDiv3.onmousemove=function(){
            startMover(this,'fontSize',50)
        }
        oDiv3.onmouseout=function(){
            startMover(this,'fontSize',14)
        }

        oDiv4.onmousemove=function(){
            startMover(this,'borderWidth',50)
        }
        oDiv4.onmouseout=function(){
            startMover(this,'borderWidth',0)
        }

        oDiv5.onmousemove=function(){
            startMover(this,'opacity',0.3)
        }
        oDiv5.onmouseout=function(){
            startMover(this,'opacity',1)
        }
    }

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

    function startMover(acr,sx,iTaget){
        clearInterval(acr.timer);
        acr.timer=setInterval(function(){
            var oDivSx=0;
            if (sx=='opacity') {
                oDivSx=parseFloat(getStyle(acr,sx))*100;
            } else {
                oDivSx=parseInt(getStyle(acr,sx));
            }
            var spead=0;
            spead=(iTaget-oDivSx/100)/10;
            spead=spead>0?Math.ceil(spead):Math.floor(spead);
            if (oDivSx==iTaget) {
                clearInterval(acr.timer);
            }else{
                if(sx=='opacity'){
                    acr.style.filter='alpha(opcity:'+(oDivSx+spead)+')';
                    acr.style.opacity=(oDivSx+spead)/100;
                }else{
                    acr.style[sx]=oDivSx+spead+'px';
                }
            }
        },17)
    }
</script>
<style>
    div{
        width: 200px;
        height: 200px;
        background: green;
        float: left;
        margin: 10px;
        font-size: 14px;
        border-width:0; 
        border-color: black;
        border-style: solid;
        opacity: 1;
        filter: alpha(opacity:1);
    }
</style>
<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">文字变大</div>
    <div id="div4">boardWidth</div>
    <div id="div5">opcite</div>
</body>
</html>
motion6

推荐阅读更多精彩内容
