skuare.net

jQueryベースのニュースティッカーjavascript「liScroll」

サイトの更新履歴などを省スペースでなるべく多くかつ注目を浴びるように表示したい場合は、ニュースティッカーを用いることがあります。
liScrollはjQueryで簡単に作れるニュースティッカーjavascriptです。

使用方法
liScrollからjquery.li-scroller.1.0.jsをjQueryからjquery.js（v1.2.1）をダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.li-scroller.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("ul#id名").liScroll({travelocity: 0.07}); //数字はスピード（大きいほど早い）
});
</script>
あとは、上で指定したid名を付与したulにニュースをliで書き込めば完成です。
<ul id="id名">
<li>ニュース1</li>
<li>ニュース2</li>
<li>ニュース3</li>
</ul>
jQueryベースのニュースティッカーjavascript「liScroll」サンプル
＊参考までにMTの最新記事をやってみました。

• 2008/07/08amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• 2008/07/03フォームで全自動でフリガナを付与するJavaScript「AutoKana.js」
• 2008/06/27Movable Typeでページ分割するプラグイン「Paged Archives」
• 2008/06/25[mootools]mooVRotatingMenu
• 2008/06/15faviconを表示しているサイト
• 2008/06/14マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」
• 2008/05/29プライバシーポリシーに関するまとめ
• 2008/05/24Googleのfaviconについて
• 2008/05/21firestorage.jp
• 2008/03/20MovableTypeを4.1にアップグレード

<ul id="id名">
<MTEntries lastn="10">
<li><span><MTDateHeader><$MTEntryDate format="%Y/%m/%d"$></MTDateHeader></span><a href="<$MTEntryPermalink archive_type="Individual"$>"><$MTEntryTitle$></li></a>
</MTEntries>
</ul>

前の記事：カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」
次の記事：Movable Type 4.0.1で画像挿入時に位置指定させないプラグイン「StylelessImage」

関連記事

• [jQuery]spinner
• [jQuery]SerialScroll
• [jQuery]scrollable HTML table
• シンプルなニュースティッカーjavascript「aScroller」
• カラフルな電光掲示板を作成するjavascript「led scroller」

---