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

関連記事

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

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

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

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

no image

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

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

Comment

@max_energy_ へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑