MooTools

• Demos

• Chaining
• Native
• Periodical

• Slick

• Slick.Finder

• Drag and Drop

• Drag.Cart
• Drag.Drop
• Drag.Move
• Drag.Scroll

• Effects

• Effects
• Fx.Morph
• Fx.Slide
• Fx.Sort
• Transitions

• Events

• Element.Event
• MouseEnter
• MouseWheel
• Element.Delegation
• Element.Event.Pseudos

• Request

• Request
• Request.HTML
• Request.JSON

• Plugins

• Accordion
• Slider
• Sortables
• Enhanced Forms

#wheel { margin: 1em; } <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> window.addEvent('domready', function(){ var up = $('up'), down = $('down'), arrows = $$(up, down), log; arrows.setStyle('opacity', 0.1); document.addEvent('mousewheel', function(event){ /* Mousewheel UP */ if (event.wheel > 0){ up.setStyle('opacity', 1); down.setStyle('opacity', 0.1); log = 'up'; } /* Mousewheel DOWN*/ else if (event.wheel < 0){ up.setStyle('opacity', 0.1); down.setStyle('opacity', 1); log = 'down'; } $('log').set('html', log); var cls = function(){ arrows.setStyle('opacity', 0.1); }.delay(100); }); });

• Demo
• Edit with jsFiddle
• CSS
• HTML
• JavaScript