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

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

フラットデザイン&ロングシャドウのアイコンフラットデザイン&ロングシャドウな19のソーシャルメディアのアイコン前のページ

ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」次のページUnicorn.js

関連記事

  1. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  2. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  3. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. jquery.autoscroll-text-tape
  6. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP