Mousewheel Event
A demonstration of mousewheel event.
本页范例参考文档JavaScript代码 | HTML代码 | CSS代码
var up = $('up'), down = $('down'), log;
[up, down].each(function(arrow) {
arrow.setStyle('opacity', .1);
});
document.addEvent('mousewheel', function(event) {
event = new Event(event);
/* Mousewheel UP */
if (event.wheel > 0) {
up.setStyle('opacity', 1);
down.setStyle('opacity', .1);
log = 'up';
}
/* Mousewheel DOWN*/
else if (event.wheel < 0) {
up.setStyle('opacity', .1);
down.setStyle('opacity', 1);
log = 'down';
}
$('log').setHTML(log);
var cls = function() {
[up, down].each(function(arrow) {
arrow.setStyle('opacity', .1);
});
}.delay(100);
});
<h3>
MouseWheel Event
</h3>
<div><strong>Mousewheel Direction:</strong> <span id="log">none</span></div>
<div id="wheel">
<div id="up"><img width="41" height="43" alt="UP" src="/demos/Mousewheel/up.gif"/></div>
<div id="down"><img width="41" height="43" alt="DOWN" src="/demos/Mousewheel/down.gif"/></div>
</div>
MouseWheel Event
Mousewheel Direction: none