[JS]リスト要素の項目をアニメーションで表示するシンプルなティッカー -List Ticker
Post on:2010年7月12日
sponsors
リスト要素の項目をフェードやスライドのアニメーションで表示するシンプルなティッカーのスクリプトを紹介します。
Super simple jQuery ticker
デモページ
デモではリスト要素の各項目が自動で次々に表示され、スクリプトのオプションでは表示方法（フェード・スライド）とアニメーションのスピードが設定できます。
実装はシンプルで、HTMLは下記のようになります。
HTML
「id="fade"」は変更可能です。
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="fade"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> </textarea> |
JavaScript
jqeury.jsと当スクリプトを外部ファイルにし、下記スクリプトを記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="js" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $('#fade').list_ticker({ speed:2000, effect:'fade' }); }) </script> </textarea> |
スクリプトのオフ時には、リスト要素がそのまま表示されます。
スクリプトのオフ時のキャプチャ
sponsors
