twitter的滾動條效果

您是否注意到twitter主頁上的滾動趨勢欄？twitter的滾動條效果

什麼是正確的方式來做到這一點與jQuery的？我聽說jQuery比JavaScript好。

2010-09-04 jblue

jQuery是用JavaScript編寫的DOM/Ajax工具包，但它不比JavaScript更好，它只是使許多任務更容易。更好的說法是'jQuery比所有DOM API更好'... – BGerrissen 2010-09-04 20:55:06

許多選項：

What's a good bit of JS or JQuery for horizontally scrolling news ticker

來源

2010-09-04 20:55:53

如果你看看源代碼，你可以看到基本結構：

<div> 
    <div> 
    <ul> 
     <li>Year Without Rain</li> 
     <li>Gameday</li> 
     <li>etc...</li> 
    </ul> 
    </div> 
    <span class="fade fade-left">&nbsp;</span> 
    <span class="fade fade-right">&nbsp;</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框架），我沒有花時間分析代碼，但它應該是非常直接的實現。

來源

2010-09-04 20:55:05

很好的解釋...保持良好的工作 – 2010-09-04 22:00:25

我重新Twitter的選取框檢查出來：Twitter marquee

我所用原JavaScript和自動化它，這樣，如果你的廣告更多的鏈接它會計算的寬度並知道何時切片並回到零

來源

2011-03-14 17:53:11 shalaw

twitter的滾動條效果

回答

相關問題