js 去掉offset等的运动框架任意运动框架-CSDN博客

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
    width:200px;
    height:200px;
    background:red;
    
    margin:10px;
    float:left;
    border:1px #000000 double;
    
    
}


</style>
<script>
window.onload=function(){
    var oDiv1=document.getElementById('div1');
        
    oDiv1.onmousemove=function(){
        onStart(this,400,'width');
        }
        oDiv1.onmouseout=function(){
        onStart(this,200,'width');
        }
        var oDiv2=document.getElementById('div2');
        oDiv2.onmousemove=function(){
        onStart(this,400,'height');
        }
        oDiv2.onmouseout=function(){
        onStart(this,200,'height');
        }
    }
//var alpha=30;
function onStart(obj,tag,value){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var cur=parseInt(getStyle(obj,value));
        var speed=(tag-cur)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(tag==cur){
        clearInterval(obj.timer);
            }else{
                obj.style[value]=cur+speed+'px';
                
                
                }
        },30);
    
    
    }
    function getStyle(obj,name){
    if(obj.currentStyle){
        
        return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
            }
    
    }
</script>
</head>

<body>
<div id="div1">变宽</div>
<div id="div2">变高</div>

</body>
</html>