您是否注意到Twitter主页上的滚动趋势栏。
使用jquery执行此操作的正确方法是什么?我听说jquery比javascript好。
答案 0 :(得分: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框架),我没有花时间分析代码,但实现起来应该非常简单。
答案 1 :(得分:1)
答案 2 :(得分:1)
我重新创建了twitter选框,请查看它:Twitter marquee
我使用原始javascript并将其自动化,以便在您添加更多链接时使用 它将计算宽度并知道何时切片并返回零