js多物體任意值運動

標籤：style   blog   http   color   使用   os   io   width   

假如有兩個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部分

<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];}}</script>