エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード

エフェクトには、fade/slide/typingの3つが可能です。
デモ

スクリプト

<script src="inewsticker.js" type="text/javascript"></script>

実装

<ul class="fade">
    <li>ニュース1つ目</li>
    <li>ニュース2つ目</li>
    <li>ニュース3つ目</li>
    <li>ニュース4つ目</li>
</ul>

<!-- オプション -->
<script type="text/javascript">
$(document).ready(function() {
    $('.fade').inewsticker({
        speed : 3000,          // テキストの切替時間
        effect : 'fade',       // エフェクト fade/slide/typing
        dir : 'ltr',           // テキスト方向 ltr/rtl
        font_size : 13,        // フォントサイズ
        color : '#000',        // フォント色
        font_family : 'arial', // フォント
        delay_after : 1000     // (?)effectが'typing'の場合の切替時間
    });
});
</script>

その他

要素のclassやid(上の例では.fade)は、CSSのフレームワークなどと被ることがあるので表示されないときは、スタイルを確認してみて下さい。

その他プラグイン
Web-Ticker / jQuery Marquee / liScroll  テキストが左右に流れる
JQuery Advanced News Ticker / vTicker  テキストが上下に流れる
jQuery News Ticker
Dynamic News RSSフィードから取得して実装が可能
Airport / Text Effects / jQuery Ticker 空港のボーディングボードのようにテキストをパタパタ

Web-Ticker

ダウンロード デモ

<link href="webticker.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.webticker.min.js" type="text/javascript"></script>
<ul id="webticker">
    <li>My First News Item</li> 
    <li>My Second News Item</li>
    <li>My Third News Item</li>
</ul>

<script type="text/javascript">
jQuery(function(){
    jQuery('#webticker').webTicker();
}); 
</script>

Airport

ダウンロード デモ

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.airport-1.1.source.js" type="text/javascript"></script>
<div id="airport"></div>

<script type="text/javascript">
$("#airport").airport([ 'moscow1', 'berlin', 'stockholm' ]);
</script>
  • このエントリーをはてなブックマークに追加

関連記事

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑