エフェクト豊富なニュースティッカー用プラグイン「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>
関連記事
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
Comment
マーキータグが非推奨って知りませんでした。 / “jQuery | エフェクト豊富なニュースティッカー用プラグイン「inewsticker」” (4 users) https://t.co/rCCjUWPfNn
マーキータグが非推奨って知りませんでした。
inewsticker
ティッカーの動きいろいろ
https://t.co/C4VnzOh7DI
jQueryでカンタン「ティッカー」(エフェクト豊富なプラグイン) - NAVER まとめ
http://matome.naver.jp/odai/2140671372556298601