デモ:垂直方向のスクロール

jQuery toolsによる「垂直方向のスクロール」の動作デモです。

サンプルコード

HTMLのサンプル

<!-- "前へ移動" -->
<a class="prev browse left">[上へ移動]</a>
	
<!-- スクロールアイテム・ルート -->
<div class="scrollable">   
	<!-- スクロールアイテム・セット -->
	<div class="items">
		<!-- 1-2 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300a.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300b.png" />
		</div>
		<!-- 3-4 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300c.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300d.png" />
		</div>
		<!-- 5-6 -->
		<div>
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300e.png" />
		<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300f.png" />
		</div>
	</div>
</div>
<!-- "次へ移動" -->
<a class="next browse right">[下へ移動]</a>

CSSのサンプル

/* ボタン */
#example .browse{
	display:block;
	width: 480px;
	height: 16px;
	cursor: pointer;
	background: #333;
	color: #eee;
}
#example .prev{	background-position: 0 0; padding-left: 18px;}
#example .prev:hover{	background-position: 0 -100px;}
#example .next{	background-position: -470px 0; padding-right: 18px;}
#example .next:hover{	background-position: -470px -100px;}
#example .disabled{	background: none; color: #999; cursor: default;}

/* パネルを囲う要素 */
#example .scrollable {
	position:relative;
	overflow:hidden;
	width: 480px;
	height:600px;
}
#example .scrollable .items {
	height:20000em;
	position:absolute;
}
#example .items div {
	float:left;
}

Javascriptのサンプル

$(function() {
	// 基本の例
	$(".scrollable").scrollable({
		circular: true,         // 繰り返し
		easing: "linear",       // スクロール方法
		speed: 1000,            // 速度(ミリ秒)
		keyboard: true,         // キーボード操作
		mousewheel: true,       // マウスホイールでのスクロール
		vertical: true          // 垂直スクロール
	});
});