JavaScript

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

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

[ads_center]

使い方

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

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

関連記事

  1. FSVS(Full Screen Vertical Scroller)
  2. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  3. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  4. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  5. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP