js多物體任意值運動

js多物體任意值運動
假如有兩個div，一個div要變寬，一個div要變高，你怎麼寫呢？ 哎呀，寫2個方法啊，一個控制div1變寬，一個控制div2變高啊   那麼你的代碼，是不是下面這樣的呢！   樣本：Div變寬和變高 現象：div1在onmouseover時變寬,onmouseout時恢複原大小;         div2在onmouseover時變高，onmouseout時恢複原大小   缺點：重複的代碼寫了好幾個方法   html部分 <div id="div1"></div><div id="div2"></div> <style>    div {  width:100px; height:150px; margin:20px; background:green;}</style>  js部分 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script> window.onload = function(){    var oDiv1 = document.getElementById("div1");    var oDiv2 = document.getElementById("div2");         oDiv1.onmouseover = function(){        startMove1(this,300);    }         oDiv1.onmouseout = function(){        startMove1(this,100);    }         oDiv2.onmouseover = function(){        startMove2(this,300);    }         oDiv2.onmouseout = function(){        startMove2(this,150);    }     } function startMove1(obj,iTarget){    clearInterval(obj.timer);    obj.timer = setInterval(function(){        var speed = (iTarget - obj.offsetWidth)/6;        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);        if(obj.offsetWidth == iTarget){            clearInterval(obj.timer);        } else {            obj.style.width = obj.offsetWidth + speed + "px";        }         },30);} function startMove2(obj,iTarget){    clearInterval(obj.timer);    obj.timer = setInterval(function(){        var speed = (iTarget - obj.offsetHeight)/6;        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);        if(obj.offsetHeight == iTarget){            clearInterval(obj.timer);        } else {            obj.style.height = obj.offsetHeight + speed + "px";        }         },30);} </script>　　 額，上面的代碼，本來是一個運動架構的，卻寫了兩個類似的方法。 而且還使用了offset，這是有缺陷的啊   那麼，可不可以用一個方法就解決這個問題了呢。 可以的   回想 js你真的瞭解offsetWidth嗎，有沒有給我們帶來什麼啟發呢？ http://www.cnblogs.com/huaci/p/3863797.html   對了，利用function getStyle(obj,name)，我們就可以控制多個屬性值的改變啦 原理：var attr= parseInt(getStyle(obj,name));   修改後的完整代碼，如下： js部分   <script> window.onload = function(){    var oDiv1 = document.getElementById("div1");    var oDiv2 = document.getElementById("div2");         oDiv1.onmouseover = function(){        startMove(this,"width",300);    }         oDiv1.onmouseout = function(){        startMove(this,"width",100);    }         oDiv2.onmouseover = function(){        startMove(this,"height",300);    }         oDiv2.onmouseout = function(){        startMove(this,"height",150);    }     } function startMove(obj,name,iTarget){    clearInterval(obj.timer);    obj.timer = setInterval(function(){        var attr = parseInt(getStyle(obj,name));        var speed = (iTarget - attr)/6;        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);        if(attr == iTarget){            clearInterval(obj.timer);        } else {            obj.style[name] = attr + speed + "px";        }         },30);} function getStyle(obj,name){    if(obj.currentStyle){        return obj.currentStyle[name];    } else{        getComputed(obj,null)[name];    }     }