JavaScriptで画像を簡単にスクロールさせられる「simplyScroll」

スクロールさせるJavaScriptは多いですが、simplyScrollほど簡単なものは、あまりないでしょう。
JvaScriptライブラリ「jQuery」のプラグインです。

使用方法

simplyScrollから、jquery.simplyscroll.js、jquery.simplyscroll.cssをjQueryからjquery.jsをダウンロードします。


<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" type="text/css">
<script src="jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.simplyscroll.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
	$(function() {
		$("#id名").simplyScroll();
	});
})(jQuery);
</script>

上記を記述したら、スクロールさせたい画像をid名でくくれば完成です。


<ul id="id名">
	<li><img src="画像パス" /></li>
	<li><img src="画像パス" /></li>
	～画像分～
</ul>

なお、オプションとして以下のようなものがあります。
frameRate 24　//フレームレート
speed 1 //スピード
horizontal true //縦方向はfalse
pauseOnHover true //マウスオーバーでとめる

サンプル

Javascriptサンプルページ一覧

skuare.net