滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい

jQueryプラグイン「JQUERY NEWS TICKER」を使ってみました。これを使えばとても簡単にニュースティッカーを実装することができます。滑らかに流れてくるので爽快です。マークアップはリスト要素を記述するだけなのでシンプルです。あと、オプションでAjaxを使ってフィードのURLを指定するだけで簡単に記事タイトルを流すこともできます。以下、使い方です。

[ads_center]

使い方

以下のURLからダウンロードできます。

jQuery News Ticker

head内でjQuery本体とプラグインを読み込みます。

<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>

ニュースティッカーを実装したいリスト要素を指定します。

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

マークアップはこんな感じです。

<ul id="js-news" class="js-hidden">
    <li class="news-item">1.サンプルテキストサンプルテキスト</li>
    <li class="news-item">2.サンプルテキストサンプルテキスト</li>
    <li class="news-item">3.サンプルテキストサンプルテキスト</li>
    <li class="news-item">4.サンプルテキストサンプルテキスト</li>
    <li class="news-item">5.サンプルテキストサンプルテキスト</li>
    <li class="news-item">6.サンプルテキストサンプルテキスト</li>
    <li class="news-item">7.サンプルテキストサンプルテキスト</li>
</ul>

とても簡単でいいですね。サンプルも作ってみました。

サンプル

• 1.サンプルテキストサンプルテキスト
• 2.サンプルテキストサンプルテキスト
• 3.サンプルテキストサンプルテキスト
• 4.サンプルテキストサンプルテキスト
• 5.サンプルテキストサンプルテキスト
• 6.サンプルテキストサンプルテキスト
• 7.サンプルテキストサンプルテキスト

オプション

いくつかオプションもあります。オプションを指定する場合はこんな感じで指定します。

$(function () {
    $('#js-news').ticker({
        speed: 0.10,
        ajaxFeed: false,
        feedUrl: false,
        feedType: 'xml',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: 'NEW!!',
        displayType: 'reveal',
        direction: 'ltr',
        pauseOnItems: 2000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    });
});

以下、分かる範囲でオプションの解説です。

speed

文字が流れていくスピードを設定できます。

ajaxFeed

trueにすることでfeedUrlを指定した場合フィードを取得することができます。

feedUrl

取得したいフィードのURLを指定します。

feedType

フィードのタイプです。

controls

コントロールボタンを表示できます。trueで表示でき、falseで非表示にできます。

titleText

ティッカーのタイトルのテキストを変更できます。ここでのサンプルでは「NEW!!」を指定してあります。

displayType

アニメーションを指定できます。revealかfadeを指定することができます。デフォルトはrevealです。fadeにするとリストがフェードで切り替わっていきます。

direction

ltrかrtlを指定できます。どちらから流れるようにするかの設定です。ltrで左から右へ、rtlで右から左です。デフォルトはltrです。

fadeInSpeed

displayTypeをfadeに指定した時のフェードインで表示されるスピードを指定できます。

fadeOutSpeed

フェードアウト時のスピードを指定できます。

色々と自分に合うように調整することができますね。ニュース系のサイトや即時性を追求したい場合なんかにいいかもしれないっすね。