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

関連記事

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

no image

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

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

入力数値の桁区切り挿入

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

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

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

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

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

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

ページの画像を非同期で読み込んでくれる「Lazy Load」

「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |

Comment

Message

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

*

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

    PAGE TOP ↑