twitter的滚动条效果

时间:2010-09-04 20:44:07

标签: javascript jquery animation jquery-animate

您是否注意到Twitter主页上的滚动趋势栏。

使用jquery执行此操作的正确方法是什么?我听说jquery比javascript好。

3 个答案:

答案 0 :(得分:3)

如果您查看源代码,可以看到基本结构:

<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框架),我没有花时间分析代码,但实现起来应该非常简单。

答案 1 :(得分:1)

答案 2 :(得分:1)

我重新创建了twitter选框,请查看它:Twitter marquee

我使用原始javascript并将其自动化,以便在您添加更多链接时使用 它将计算宽度并知道何时切片并返回零