sarpay
6/17/2019 - 7:38 AM

Events

MouseWheel

http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html

Supporting the mouse wheel can add further interactivity to your HTML5 web pages. Rather than scrolling the page, you could perform a different action such as zooming in or out.

<img id="myimage" src="myimage.jpg" alt="my image" />
var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
    // IE9, Chrome, Safari, Opera
    myimage.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";
    return false;
}