Ticker.js是一个轻量级的jQuery插件，它可以将HTML列表转换为SEO友好的新闻Ticker，并带有键入和淡出动画。有助于以专业的方式展示突发新闻和最近的博客文章。

特征：

• 按随机顺序显示项目。
• 悬停时暂停/完成。
• 键入时光标闪烁。
• 可配置的渐变动画。
• 支持任何HTML内容。

参见：

• jQuery和纯JavaScript/CSS中的10个最佳新闻提示插件

如何使用它:

1.在页面上包含jQuery库和Ticker.js插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.ticker.js"></script>

2.为新闻代码创建一个HTML列表。

<div class="ticker">
  <strong>Breaking News:</strong>
  <ul>
    <li>Breaking News #1</li>
    <li>Breaking News #2</li>
    <li><a href="#">Breaking News 3</a></li>
  </ul>
</div>

3.调用顶部容器上的函数。

$(function(){
  $('.ticker').ticker();
});

4.将CSS样式应用于新闻播报器。

.ticker {
  /* CSS styles here */
}
 
.ticker div {
  /* CSS styles here */
}

5.可用于自定义新闻行情的选项。

$(function(){
  $('.ticker').ticker({
 
    // randomize the items
    random: false,
 
    // transition delay
    itemSpeed: 3000,
 
    // blinking speed
    cursorSpeed: 50,
 
    // pause on hover
    pauseOnHover: true,
 
    // finish on hover
    finishOnHover: true,
 
    // customize cursor
    cursorOne: '_',
    cursorTwo: '-',
 
    // config the fading animation
    fade: true,
    fadeInSpeed: 600,
    fadeOutSpeed: 300,
    
  });
});

预览截图

打字和褪色动画 新闻Ticker jQuery Ticker.js