エフェクト豊富なニュースティッカー用プラグイン「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>
関連記事
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
Comment
マーキータグが非推奨って知りませんでした。 / “jQuery | エフェクト豊富なニュースティッカー用プラグイン「inewsticker」” (4 users) https://t.co/rCCjUWPfNn
マーキータグが非推奨って知りませんでした。
inewsticker
ティッカーの動きいろいろ
https://t.co/C4VnzOh7DI
jQueryでカンタン「ティッカー」(エフェクト豊富なプラグイン) - NAVER まとめ
http://matome.naver.jp/odai/2140671372556298601