エフェクト豊富なニュースティッカー用プラグイン「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>
関連記事
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
Comment
マーキータグが非推奨って知りませんでした。 / “jQuery | エフェクト豊富なニュースティッカー用プラグイン「inewsticker」” (4 users) https://t.co/rCCjUWPfNn
マーキータグが非推奨って知りませんでした。
inewsticker
ティッカーの動きいろいろ
https://t.co/C4VnzOh7DI
jQueryでカンタン「ティッカー」(エフェクト豊富なプラグイン) - NAVER まとめ
http://matome.naver.jp/odai/2140671372556298601