リストをスムーズ動かすJavaScript「jQuery scrollList」

リストを記述することが多いと思いますが、長くなったときに見づらくなります。
そんな時、省スペース化して、リストを自動スクロールさせれば、見やすくかつ印象的になります。
via:jQuery scrollList
リストをスムーズ動かすJavaScript「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」サンプル

sponsors

「リストをスムーズ動かすJavaScript「jQuery scrollList」」をシェアする

記事作成:
記事URL:

TOP > > > リストをスムーズ動かすJavaScript「jQuery scrollList」