js之運動架構緩沖運動

由于JS裡對于數值小數點會自動去除，是以對于運動位置，需要使用Math.ceil()向上取整或者

Math.floor()向下取整進行解決

以下是我的緩沖運動練習簡單代碼

<code>&lt;</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;無标題文檔&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>style</code><code>&gt;</code>

<code>#div1{width:200px;height:200px;background:red;left:0px;top:50px;position:absolute;}</code>

<code>#div2{width:1px;height:250px;background:black;left:400px;top:20px;position:absolute;}</code>

<code>&lt;/</code><code>style</code><code>&gt;</code>

<code>&lt;</code><code>script</code><code>&gt;</code>

<code>window.onload=function ()</code>

<code>{</code>

<code>    </code><code>var oDiv=document.getElementById('div1');</code>

<code>    </code><code>var oBtn=document.getElementById('btn1');</code>

<code>    </code><code>oBtn.onclick=function ()</code>

<code>    </code><code>{</code>

<code>        </code><code>startMove(400);</code>

<code>        </code> 

<code>    </code><code>}</code>

<code>};</code>

<code>var timer=null;</code>

<code>function startMove(target)</code>

<code>    </code><code>var speed=0;</code>

<code>    </code><code>clearInterval(timer)</code>

<code>    </code> 

<code>    </code><code>timer=setInterval(function ()</code>

<code>            </code><code>//speed會被直接取整，舍去餘數，是以位置不精确，需要通過向上取整Math.ceil()來解決</code>

<code>            </code><code>speed=Math.ceil((target-oDiv.offsetLeft)/10);   </code>

<code>            </code><code>oDiv.style.left=oDiv.offsetLeft+speed+'px';</code>

<code>            </code><code>document.title=oDiv.offsetLeft+','+speed;</code>

<code>    </code><code>},30);</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>id</code><code>=</code><code>"btn1"</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"開始運動"</code> <code>/&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"div1"</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"div2"</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

本文轉自 水滴的曆程 51CTO部落格，原文連結:http://blog.51cto.com/12390959/1907149