<div id="demo" style="overflow: hidden; height: 80px; width: 180px;"><div id="demo1" class="demo1"><ul><li><img src="list.gif" /> <a title=".net開發工程師" href="#">.net開發工程師</a></li><li><img src="list.gif" /> <a title="專案經理" href="#">專案經理 </a></li><li><img src="list.gif" /> <a title="虛擬化測試工程師" href="#">虛擬化測試工程師</a></li><li><img src="list.gif" /> <a title="銷售經理" href="#">銷售經理 </a></li><li><img src="list.gif" /> <a title="協議測試工程師" href="#">協議測試工程師</a></li><li><img src="list.gif" /> <a title="協議開發工程師" href="#">協議開發工程師</a></li><li><img src="list.gif" /> <a title="驅動工程師" href="#">驅動工程師 </a></li><li><img src="list.gif" /> <a title="J2ee軟體開發工程師" href="#">J2ee軟體開發工程師</a></li><li><img src="list.gif" /> <a title="赴IBM 大機支援人員工程師" href="#">赴IBM大機支援人員工程師</a></li><li><img src="list.gif" /> <a title="赴IBM Websphere portal server實施工程師" href="#">赴IBMWebsphere portal server實施工程師 </a></li><li><img src="list.gif" /> <a title="赴IBM AIX系統管理員" href="#">赴IBMAIX系統管理員 </a></li></ul></div><div id="demo2" class="demo2"></div></div>
//方法1function Marquee1(){if(2*demo1.offsetHeight-demo.scrollTop<=80){demo.scrollTop-=demo1.offsetHeight; }else{demo.scrollTop++ ; }}//方法2function Marquee21(){ if(demo2.offsetTop-demo.scrollTop<=0){ demo.scrollTop-=demo1.offsetHeight;}else{demo.scrollTop++ ; }}
註:offsetTop指的是demo2對應的div到當前對象到其上級層頂部的距離,如果對象是包括在一個DIV中時,此DIV不會被當做是此對象的上級層,(即對象的上級層會跳過DIV對象),直到body或一個table上級層(Table時則不會有問題,不會跳過的)。
scrollTop:對象的最頂部到對象在當前視窗顯示的範圍內的頂邊的距離.即是在出現了縱向捲軸的情況下,因捲軸拉動而隱藏的距離.
offsetHeight:當前對象的高度。
當使用第一個方法的時候請注意一個問題,就是當demo2.offsetTop地距離大於demo1和demo2高度和的時候,滾動只會執行一次