bl6.jp

シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイン「vTicker」をご紹介します。ulのli要素に表示させるテキストを記述していき、vTickerをセットアップするだけです。スペースを有効活用したい時や、ちょっとした導線をつくりたい時によさそうですね。

[ads_center]

使い方

このようにli要素に表示させたいテキストを記述していきます。ティッカーはli要素ごとに切り替わっていきます。

<div id="sample">
    <ul>
        <li>サンプルテキスト1</li>
        <li>サンプルテキスト2</li>
        <li>サンプルテキスト3</li>
    </ul>
</div>

あとはvTickerをセットするだけです。

$(function() {
    $('#sample').vTicker();
});

オプションも色々あり、スピードやアイテムを表示させる数を指定することもできます。CSSで見た目をカスタマイズしたりすれば色々と応用が効きそうですね。

vTickerのダウンロードや詳細については以下の公式サイトで確認することができます。

vTicker