一个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="no-js"> <ul id="js-news" 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.