bl6.jp

JQuery Advanced News TickerというjQueryプラグインを使えば、フレキシブルでアニメーションする垂直型のニュースティッカーを実装することができます。ブログのトップページやサイドバーなんかに使ってみたいです。

[ads_center]

JQuery Advanced News Tickerの使い方

JQuery Advanced News Ticker | risq

こんな感じの垂直ティッカーです。スペースを有効に活用しながら、たくさんある記事を上手く見せたりすることができそうですね。

var nt_example1 = $('#nt-example1').newsTicker({
    row_height: 80,
    max_rows: 3,
    duration: 4000,
    prevButton: $('#nt-example1-prev'),
    nextButton: $('#nt-example1-next')
});

使い方もシンプルです。以下のようにHTMLをマークアップ。jQuery本体とnewsTicker.jpも読み込んでおきます。

<ul class="newsticker">
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    ・・・中略・・・
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/newsTicker.js">

ニュースティッカーをセット。

$('.newsticker').newsTicker();

オプションはこんな感じで指定することができます。

$('.newsticker').newsTicker({
    row_height: 48,
    max_rows: 2,
    speed: 600,
    direction: 'up',
    duration: 4000,
    autostart: 1,
    pauseOnHover: 0
});

他にも色々なカスタマイズをすることができるので、気になる方はチェックしてみてはいかがでしょうか。