JavaScript

フレキシブルな垂直ニュースティッカーを実装できるjQueryプラグイン「JQuery Advanced News Ticker」

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

[ads_center]

JQuery Advanced News Tickerの使い方

JQuery Advanced News Tickerの使い方

JQuery Advanced News Ticker | risq

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

JQuery Advanced News Ticker

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
});

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

関連記事

  1. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  2. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. Erge Drop Down Menu Control
  5. jQuery Section Navi Plugin
  6. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP