mootools

References to Documentation

1. Class/Class.js#Class.extend
2. Element/Element-Event.js#Event
3. Class/Class-Extras.js#Events.fireEvent
4. Element/Element-Event.js#Element.addEvents
5. Native/Element.js#Element.getStyle
6. Native/Element.js#Element.setOpacity
7. Plugins/Color.js#Color
8. Plugins/Color.js#Array.hsbToRgb

Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},
 
	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});
 
/* Resize */
$('cow1').addEvents({
	'wheelup': function(e) {
		e = new Event(e).stop();
 
		this.width *= 1.1;
		this.height *= 1.1;
	},
 
	'wheeldown': function(e) {
		e = new Event(e).stop();
 
		if (this.width-30 >= 30) {
			this.width /= 1.1;
			this.height /= 1.1;
		}
	}
});
 
/* Opacify */
var opacity;
$('cow2').addEvents({
	'wheelup': function(e) {
		e = new Event(e).stop();
 
		opacity = parseFloat(this.getStyle('opacity'));
		opacity += 0.1;
		if (opacity < 1.1) this.setOpacity(opacity);
	},
 
	'wheeldown': function(e) {
		e = new Event(e).stop();
 
		opacity = this.getStyle('opacity');
		opacity -= 0.1;
		if (opacity > 0) this.setOpacity(opacity);
	}
});
 
/* Color */
var background = $('color').getStyle('background-color');
var color = new Color(background).hsb;
 
$('color').addEvents({
	'wheelup': function(e) {
		e = new Event(e).stop();
 
		var hue = color[0] + 5;
		if (hue > 360) {
			hue = 0;
		}
		color[0] = hue;
		this.setStyle('background-color', color.hsbToRgb().rgbToHex());
	},
 
	'wheeldown': function(e) {
		e = new Event(e).stop();
 
		var hue = color[0] - 5;
		if (hue < 0) {
			hue = 360;
		}
		color[0] = hue;
		this.setStyle('background-color', color.hsbToRgb().rgbToHex());
	}
});

<h3>Resize</h3>
<div class="desc"></div>
<div id="demo1">
	<img id="cow1" width="150" height="182" alt="moo" src="/demos/MousewheelCustom/moo.png"/>
</div>
 
<h3>Opacify</h3>
<div class="desc"></div>
<div id="demo2">
	<img id="cow2" width="150" height="182" alt="moo" src="/demos/MousewheelCustom/moo.png"/>
</div>
 
<h3>Color</h3>
<div class="desc"></div>
<div id="demo3">
	<div id="color"></div>
</div>

#wheel {
	margin: 1em;
}
 
#cow1, #cow2, #color {
	cursor: n-resize;
}
 
#color {
	width: 300px;
	height: 150px;
	border: 1px solid #333333;
	background-color: #e8a3a3;
}