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

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

jQueryでウィンドウサイズによって処理を変えるjQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる前のページ

JavaScriptの配列操作をメモがてら整理してまとめてみる次のページ

関連記事

  1. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  2. Animated Weather Cards

    JavaScript

    シンプルでお洒落なアニメーションつき天気予報「Animated Weather Cards」

    お洒落なアニメーションがついた天気予報カード「Animated Wea…

  3. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  4. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  5. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  6. jQuery_Overlay_Menu

コメント

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

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

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP