Javascript實現無縫滾動的問題討論

來源:互聯網
上載者:User
<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高度和的時候,滾動只會執行一次

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.