twitter 的滚动条效果

Posted 2023-05-08

技术标签:

【中文标题】twitter 的滚动条效果【英文标题】：twitter's scrolling bar effect 【发布时间】：2011-04-08 07:41:47 【问题描述】：

你有没有注意到 twitter 主页上的滚动趋势栏。

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

【问题讨论】：

jQuery 是一个用 javascript 编写的 DOM/Ajax 工具包，因此它并不比 javascript 好，它只是让很多任务变得更容易。更好的说法是“jQuery 比所有 DOM API 都好”... 【参考方案1】：

如果你看一下源代码，你可以看到基本结构：

<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 框架），我没有花时间分析代码，但它应该很容易实现。

【讨论】：

【参考方案2】：

许多选项：

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

【讨论】：

【参考方案3】：

我重新创建了 twitter 字幕，看看：Twitter marquee

我使用原始 javascript 并将其自动化，这样如果您广告更多链接它会计算宽度并知道何时将其切片并返回零

【讨论】：

以上是关于twitter 的滚动条效果的主要内容，如果未能解决你的问题，请参考以下文章

jquery怎么实现平滑滚动效果就是随着滚动条而滚动