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

jquery-news-ticker

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

スポンサード リンク

使い方

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

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
フェードアウト時のスピードを指定できます。

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

スポンサード リンク

アクセスランキング

Tags

Archives