3
A
回答
1
3
如果你看看源代碼,你可以看到基本結構:
<div>
<div>
<ul>
<li>Year Without Rain</li>
<li>Gameday</li>
<li>etc...</li>
</ul>
</div>
<span class="fade fade-left"> </span>
<span class="fade fade-right"> </span>
</div>
的ul
元素是一個包含主題列表容器。這個元素的位置被動畫來滾動它。當滾動列表即將結束時,列表的內容會附加到列表的末尾(以模擬列表出現並連續滾動)。如果沒有這樣做,Twitter可能會選擇扭轉滾動方向。但他們如何做得更好。
爲了得到衰落效果,使用了.fade-left
和.fade-right
元素。它們左右對稱。它們被設置爲透明,圖像本身是一個透明的漸變:http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png。使用z-index
,它位於滾動列表的上方,因此在雙方都會產生透明效果。
Twitter確實使用jQuery(但您只知道,jQuery是JavaScript,只是一個JavaScript框架),我沒有花時間分析代碼,但它應該是非常直接的實現。
+0
很好的解釋...保持良好的工作 – 2010-09-04 22:00:25
1
我重新Twitter的選取框檢查出來:Twitter marquee
我所用原JavaScript和自動化它,這樣,如果你的廣告更多的鏈接 它會計算的寬度並知道何時切片並回到零
相關問題
- 1. 滾動效果JQuery
- 2. jquery滾動效果?
- 3. 滾動效果 - Cocos2d
- 4. 動畫效果recyclerview滾動
- 5. 滾動條JTextarea無效
- 6. 我不能回滾滾動的效果
- 7. 隱藏滾動條如果不滾動
- 8. 花式滾動效果
- 9. jquery滾動效果不好
- 10. CSS背景滾動效果
- 11. 鉻:只在一定的過渡效果怪異的滾動條
- 12. 滾動時的運動模糊效果
- 13. 動畫效果樞紐的滾動
- 14. 無論垂直滾動條效果如何,控件的位置
- 15. 用滾動效果移動背景
- 16. 將JQuery UI效果應用於文本時滾動條問題
- 17. Fancybox在服務器和本地主機顯示不同的效果(與滾動條和沒有滾動條)
- 18. 滾動視圖上的Parralax效果
- 19. Javascript中的垂直滾動效果
- 20. 網站上的滾動效果?
- 21. jQuery的:滾動手風琴效果
- 22. Android的滾動型QuickAction效果
- 23. Drupal網站的滾動效果
- 24. 使用actionscript3的組滾動效果
- 25. fancybox上的圖片滾動效果
- 26. jquery的兩列滾動效果
- 27. 滾動視圖的自定義滾動效果?
- 28. 使用CSS的蘋果式滾動條
- 29. Live滾動Twitter的飼料
- 30. 帶滾動條的滾動FlowPanel滾動條
jQuery是用JavaScript編寫的DOM/Ajax工具包,但它不比JavaScript更好,它只是使許多任務更容易。更好的說法是'jQuery比所有DOM API更好'... – BGerrissen 2010-09-04 20:55:06