[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker

サイト構築 -JavaScript

Post on:2011年11月7日

sponsorsr

アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。
IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。

jQuery News Ticker
デモ

[ad#ad-2]

jQuery News Tickerの実装

jQuery News Tickerの実装

外部ファイル

スタイルシートとスクリプトを外部ファイルとして指定します。

<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script src="includes/jquery.ticker.js" type="text/javascript"></script>

HTML

各ニュースはリスト要素で実装します。
デモはul要素で実装していますが、ol要素でも動作します。

<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

jQueryのセレクタ(#js-news)でニュースティッカーのリスト要素を指定します。

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

[ad#ad-2]

スクリプトのオプション

スクリプトのオプションではアニメーションのスピード、フェードの書式、コントローラーの有無、表示のタイミングなどが設定できます。

$(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
    );
});

オプションを使用すると、下記のようになります。

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            speed: 0.10,
            htmlFeed: false,
            fadeInSpeed: 600,
            titleText: 'Latest News'
        });
    });
</script>