Using HTML5 to realize mouse wheel event amplification and reduce the function of picture

You and I both know adding a mouse wheel event to a HTML5 Web page can better enable users to interact with the Web page. In HTML5, the mouse wheel does not just slide the page up and down, you can actually rely on this to do more, such as zooming in and out of the horizon plane.

Look at the actual demo effect

Most browsers support the mouse wheel event, so you can subscribe to the mouse wheel event, and whenever the event is triggered, you can get a property named Wheeldelta, which represents the size of the mouse wheel change, in which a positive value indicates that the wheel is sliding down and a negative number indicates that the wheel is sliding up. The larger the absolute value, the larger the sliding range.

Unfortunately, there is still a browser does not support the mouse wheel event. That's Firefox. Mozilla has implemented a process called "dommousescroll" that passes an event argument named event with a name of detail attribute, however, this detail property is different from Wheeldelta and it can only return positive values. That is, you can only persist the value of the mouse wheel scrolling down.

You should pay special attention to that Apple has also disabled the Mouse scrolling control page up and down in Safari browser, but this feature is still used normally in the WebKit engine, so the code you write is not going to trigger any problems.

Add mouse wheel Event handling method

First we add a picture to the Web page, and then we can use the mouse wheel to control the zoom of this picture.

xml/html code to copy content to clipboard

　　

Now to add the mouse wheel event handling code

xml/html code to copy content to clipboard

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);

To enable different browsers to support the processing practices

In the following case, we will reverse the detail value of Firefox and then return one of the 1 or-1

xml/html code to copy content to clipboard

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)));

Now we directly decide the size range of the picture. The following code sets the width range of a picture to 50-800 pixels

xml/html code to copy content to clipboard

Myimage.style.width = Math.max (M, Myimage.width + (delta)) + "px";

return false;

}

Finally, we return false in the method to terminate the standard mouse wheel event handling to prevent it from sliding the page up and down.

View the actual demo