デモ:基本的なマウスホイール連動

jQuery toolsによる「基本的なマウスホイール連動」の動作デモです。
各ボックスの上でマウスホイールを操作するとサイズが変化します。

サンプルコード

HTMLのサンプル

<div class="box color1"></div>
<div class="box color2"></div>
<div class="box color3"></div>

CSSのサンプル

#example .box{
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 5px;
	background: #c93;
}
#example .color1{
	background: red;
}
#example .color2{
	background: green;
}
#example .color3{
	background: blue;
}

Javascriptのサンプル

$(function() {
	// ボックスの上でマウスホイールを操作するとサイズが変化
	$("#example .box").mousewheel(function(event, delta) {
		$(this).animate({height: "+="+delta*2});
		return false;
	});
});