js運動架構之側邊框

<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:150px;height:200px;background:blue;left:-150px;top:100px;position:absolute;}</code>

<code>#div1 span{width:25px;height:50px;position:absolute;left:150px;top:75px;background:yellow;line-height:25x;}</code>

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

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

<code>window. ()</code>

<code>{</code>

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

<code>oDiv. ()</code>

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

<code>};</code>

<code>startMove(-150);</code>

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

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

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

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

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

<code>//判斷變框所處位置相對于目标位置，進而指派速度大小</code>

<code>if(oDiv.offsetLeft&gt;n1)</code>

<code>speed=-10;</code>

<code>}</code>

<code>else</code>

<code>speed=10;</code>

<code>if(oDiv.offsetLeft==n1)</code>

<code>oDiv.style.left=oDiv.offsetLeft+speed+'px';</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>div</code> <code>id</code><code>=</code><code>"div1"</code><code>&gt;</code>

<code>&lt;</code><code>span</code><code>&gt;分享&lt;/</code><code>span</code><code>&gt;</code>

<code>&lt;/</code><code>div</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/1906638