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

リストを記述することが多いと思いますが、長くなったときに見づらくなります。
そんな時、省スペース化して、リストを自動スクロールさせれば、見やすくかつ印象的になります。
via:jQuery scrollList

sponsors

使用方法

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>

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net