エフェクト豊富なニュースティッカー用プラグイン「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>
  • このエントリーをはてなブックマークに追加

関連記事

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

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

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

Comment

Message

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

*

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

    PAGE TOP ↑