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

2007

11/01

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

使用方法
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の最新記事をやってみました。


<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>

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加するこのページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

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


コメント投稿












jQueryベースのニュースティッカーjavascript「liScroll」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

トラックバック一覧


Random Entry Images

[jQuery]Auto-Growing Textarea
[mootools]Dialog
[jQuery]Accordion
ソートするテーブルを作成するjavascript「SortableTable」

Powered by Movable Type 4.1
RSSリーダーで購読

Copyright © skuare.net All rights reserved.