JavaScript

ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

ニュースやお知らせなんかに使えるティッカー「jQuery WebTicker」を使ってみました。テキストが滑らかに流れていくので目を引かせたい時に効果がありそうですね。使い方もほぼプラグインを読み込むだけなのでとてもシンプルです。ということで以下使い方です。

[ads_center]

使い方

jQuery本体とプラグインを読み込み、WebTickerをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(function(){
    $('#webTicker').webTicker();
});
</script>

公式サイトにサンプルのCSSもダウンロードできるのでそれも読み込んでおきます。

<link href="webticker.css" rel="stylesheet" type="text/css">

ティッカーにするHTMLです。

<ul id="webTicker">
    <li>Sample text</li>
    <li>Sample text</li>
    <li>Sample text</li>
    <!-- 略 -->
</ul>

これだけでOKです。

オプションはスピードと流れる方向を指定することができます。以下のように指定します。

<script type="text/javascript">
$(function(){
    $('#webTicker').webTicker({
        travelocity: 0.05, // スピード
        direction: 1, // 方向
    });
});
</script>

ということで、とても使いやすくてオススメです。ニュース系のサイトなんかにはぴったりですね。以下からダウンロードできます。

また、他のティッカーのプラグインで「JQUERY NEWS TICKER」というのがあるんですが、こちらもお洒落なティッカーなのでよかったら参考にしてみて下さい。

関連記事

  1. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  2. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  3. Rainbow.js
  4. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  5. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP