twitter的滚动条效果

发布于 2024-09-17 17:21:32 字数 87 浏览 4 评论 0原文

你注意到 Twitter 主页上的滚动趋势栏了吗？

使用 jquery 的正确方法是什么？我听说 jquery 比 javascript 更好。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

π浅易 2024-09-24 17:21:32

如果您查看源代码，您可以看到基本结构：

<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 框架），我没有花时间分析代码，但它的实现应该非常简单。

If you take a look at the source code, you can see the basic structure:

<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>

The ul element is the list container containing the topics. The position of this element is animated to scroll it. When the scrolling list is about to come to the end, the contents of the list are appended to the end of the list (to simulate the list coming around and scrolling continuously). If this wasn't done, Twitter would probably have chosen to reverse the direction of the scroll. But how they did it is much nicer.

To get the fading effect, the .fade-left and .fade-right elements are used. They are aligned to the left and right, respectably. They are set to be transparent and the image itself is a transparent gradient: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. Using z-index, it is positioned over the scrolling list, thus giving a transparent effect on both sides.

Twitter does indeed use jQuery (but just so you know, jQuery is JavaScript, just a JavaScript framework) and I haven't taken the time to analyze the code, but it should be pretty straight forward to implement.

回复收藏 0 原文