エフェクト豊富なニュースティッカー用プラグイン「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プラグインです。ダウンロード スクリプト 実装
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
Comment
マーキータグが非推奨って知りませんでした。 / “jQuery | エフェクト豊富なニュースティッカー用プラグイン「inewsticker」” (4 users) https://t.co/rCCjUWPfNn
マーキータグが非推奨って知りませんでした。
inewsticker
ティッカーの動きいろいろ
https://t.co/C4VnzOh7DI
jQueryでカンタン「ティッカー」(エフェクト豊富なプラグイン) - NAVER まとめ
http://matome.naver.jp/odai/2140671372556298601