skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
リストをスムーズ動かすJavaScript「jQuery scrollList」
｜
｜
｜
｜
｜
｜
リストを記述することが多いと思いますが、長くなったときに見づらくなります。
そんな時、省スペース化して、リストを自動スクロールさせれば、見やすくかつ印象的になります。
via：jQuery scrollList
使用方法
jQuery scrollListからjquery.scrollList.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.scrollList.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名 ul').scrollList('up');
});
</script>
<style>
#id名 {height:100px;overflow:hidden;margin:0;padding:0;}
/* heightはお好きな数値で指定ください */
ul {list-style:none;}
</style>
あとは上記で振ったid名でくくれば完成です。
<div id="id名">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</div>
デフォルトは上にスクロールするタイプですが、以下のように下、右、左という風に変更できます。
<script type="text/javascript">
$(document).ready(function(){
$('#id名 ul').scrollList('up');
$('#id名 ul').scrollList('left', 20, 500); //左、ピクセル数、秒数
$('#id名 ul').scrollList('down', 30, 1000); //下、ピクセル数、秒数
$('#id名 ul').scrollList('right', 40, 0); //右、ピクセル数、秒数
});
</script>
リストをスムーズ動かすJavaScript「jQuery scrollList」サンプル
記事作成：2009年06月04日
▼リストをスムーズ動かすJavaScript「jQuery scrollList」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：2.5kbのJavaScriptでテーブルをソート・ページャーなどが可能に！
次の記事：こいつは凄い！フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」
