DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery News Ticker 基於jQuery的即時新聞行情展示插件
jQuery News Ticker 基於jQuery的即時新聞行情展示插件
編輯: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>


官方網站 http://www.gbin1.com/technology/jquerynews/20111105jquerypluginnewsticker/demo.html
相關文件下載
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved