一个jQuery的即时新闻行情展示插件jQuery News Ticker
2011-11-06 20:40
375 查看
jQuery news ticker是一个非常方便的jQuery插件,能够快速让你生成这样的一个新闻行情效果。
它能够通过列表,HTML甚至是RSS(只能加载本站的RSS feed)来生成新闻内容,并且支持前后播放和停止。这个插件支持一系列的自定义选项,例如:
播放速度
播放效果
播放方向
显示时间
代码开发简单高效。
首先引入jQuery news ticker类库及其jQuery类库:
HTML代码:
javascript:
如果需要自定义选项效果,如下:
下面代码可以从RSS feed加载内容:
支持的浏览器:IE6+, FF 3.6+, Chrome, Safari, Safari Mobile and Opera.
它能够通过列表,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.
相关文章推荐
- 一个jQuery的即时新闻行情展示插件jQuery News Ticker
- 一个jQuery的即时新闻行情展示插件jQuery News Ticker
- jQuery News Ticker 基于jQuery的即时新闻行情展示插件
- jQuery News Ticker 基于jQuery的即时新闻行情展示插件
- 即时新闻展示插件jQuery News Ticker,超级简单!
- 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2
- 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2
- 自己动手编写jQuery滚动新闻(jQuery News Ticker)插件
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 发布一个jQuery做的导航菜单的插件 submenu
- 一个进行枚举选择的jquery插件(仿easyui风格)
- jquery 仿163网易图片新闻幻灯片展示
- 利用JQuery写一个简单的分页插件
- 分享一个jQuery iframe 弹窗插件Boxen
- 超炫的jquery图像展示插件体验
- 分享33个优秀的 jQuery 图片展示插件