bl6.jp

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

[ads_center]

使い方

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

Totem: A Vertical Ticker jQuery Plugin

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>

サンプル

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

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

$(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の場合はマウスオーバーしてもアニメーションをし続けます。

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

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