一个jQuery的即时新闻行市展示插件jQuery News Ticker

一个jQuery的即时新闻行情展示插件jQuery News Ticker

日期：2011/11/05? 来源：GBin1.com

今天分享一个新闻行情的jQUery插件，可以帮助大家使用比较小的页面区域来展示最新最重要的信息。

?

在线演示

?

jQuery?news ticker是一个非常方便的jQuery插件，能够快速让你生成这样的一个新闻行情效果。

它能够通过列表，HTML甚至是RSS（只能加载本站的RSS feed）来生成新闻内容，并且支持前后播放和停止。这个插件支持一系列的自定义选项，例如：

代码开发简单高效。

首先引入jQuery news ticker类库及其jQuery类库：

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" /><script src="jquery.ticker.js" type="text/javascript"></script>

HTML代码：

<div id="ticker-wrapper" class="js-hidden">??????? <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>??????? <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>??????? <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>??????? <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>??? </ul></div>

javascript：

<script type="text/javascript">??? $(function () {??????? $('#js-news').ticker();??? });</script>

如果需要自定义选项效果，如下：

$(function () {??? $('#js-news').ticker(??????? speed: 0.10,?????????? // The speed of the reveal??????? ajaxFeed: false,?????? // Populate jQuery News Ticker via a feed??????? feedUrl: false,??????? // The URL of the feed?? ??????????????????????? // MUST BE ON THE SAME DOMAIN AS THE TICKER??????? feedType: 'xml',?????? // Currently only XML??????? htmlFeed: true,??????? // Populate jQuery News Ticker via HTML??????? debugMode: true,?????? // Show some helpful errors in the console or as alerts? ?? ??????????????????????? // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!??????? controls: true,??????? // Whether or not to show the jQuery News Ticker controls??????? titleText: 'Latest',?? // To remove the title set this to an empty String??????? displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'??????? direction: 'ltr'?????? // Ticker direction - current options are 'ltr' or 'rtl'??????? pauseOnItems: 2000,??? // The pause on a news item before being replaced??????? fadeInSpeed: 600,????? // Speed of fade in animation??????? fadeOutSpeed: 300????? // Speed of fade out animation??? );});??? 

下面代码可以从RSS feed加载内容：

<script type="text/javascript">??? $(function () {??????? $('#js-news').ticker({??????????? htmlFeed: false,??????????? ajaxFeed: true,??????????? feedUrl: 'PUT THE URL OF THE RSS FEED HERE - e.g. http://example.com/rss.xml',??????????? feedType: 'xml'??????? });??? });</script> 

支持的浏览器：IE6+, FF 3.6+, Chrome, Safari, Safari Mobile and Opera.

原文来自： GBin1推荐：一个jQuery的即时新闻行情展示插件jQuery News Ticker