JavaScript

リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker」

おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライドさせていくjQueryプラグインのティッカー「Totem Ticker」を試してみました。サイドバーなんかに設置してみてもよさそうですね。結構使う機会がありそうな感じです。以下、使い方とちょっとしたサンプルも作ってみたのでよろしければどうぞ。

[ads_center]

使い方

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.totemticker.js"></script>

いくつかオプションを設定します。

<script type="text/javascript">
$(function(){
    $('#vertical-ticker').totemticker({
        row_height: '100px',
        next      : '#ticker-next',
        previous  : '#ticker-previous',
        stop      : '#stop',
        start     : '#start',
        mousestop : true,
    });
});
</script>

マークアップはこんな感じです。id名にvertical-tickerとついたul要素の中のli要素をスライドさせていきます。

<ul id="vertical-ticker">
    <li>text01</li>
    <li>text02</li>
    <li>text03</li>
    <li>text04</li>
    <li>text05</li>
    <li>text06</li>
    <li>text07</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>

サンプル

とりあえず適当に作ってみたサンプルです。細かい部分まで作ってないのでちょっとあれですが、こんな感じで動くんだなっていうのが伝わればいいかなーと思います。

  • text01
  • text02
  • text03
  • text04
  • text05
  • text06
  • text07

Previous Next Stop Start

サンプルではオプションを少し変更してみました。アニメーションのスピードや、間隔なんかを変更できます。

$(function(){
    $('#vertical-ticker').totemticker({
        row_height: '60px',
        speed: 500,
        interval: 2000,
        max_items: 5,
        next	: '#ticker-next',
        previous: '#ticker-previous',
        stop	: '#stop',
        start: '#start',
        mousestop: true
    });
});

以下、簡単なオプションです。

オプション

row_height
各ティッカーの行の高さです。均一に指定するようにします。
speed
アニメーションのスピードです。数値が高ければ遅く、低ければ速くなります。
interval
アニメーションする間隔のスピードです。こちらも数値を高くすれば間隔が長くなり、低くすれば短くなります。
max_items
表示する行の数です。例えば2つだけ表示したい場合は2と指定します。
mousestop
こちらは、マウスオーバーしている間はアニメーションさせないようにしたりできます。trueかfalseを指定できます。trueの場合はマウスオーバーするとアニメーションが止まり、falseの場合はマウスオーバーしてもアニメーションをし続けます。

こんな感じでオプションも簡単なものばかりなので、気軽に使えるかと思います。

とても使いやすいプラグインですね。

MacにMySQLとphpMyAdminをインストールする手順前のページ

軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる次のページ

最近の記事

  1. FUNLOGY スピーカー
  2. 聖剣伝説 VISIONS of MANA
  3. エルデの追憶
  4. コーヒー豆
  5. マレニア様……
PAGE TOP