HTML5 is used to zoom in and out images with scroll wheel events,

HTML5 is used to zoom in and out images with scroll wheel events,
This article mainly introduces how to use HTML5 to zoom in and zoom out images with the mouse wheel event. Safari users should pay attention to whether the mouse scroll control page slide function is disabled. For more information, see

You and I all know that adding a scroll wheel event to an HTML5 webpage can better allow users to interact with the webpage. In HTML5, the mouse wheel is not only able to slide pages up and down, but you can also rely on this to complete more functions, such as the enlargement and reduction of the field of view plane.

View the actual demo results
Most browsers support scroll wheel events, so you can subscribe to the scroll wheel event method first. Whenever an event is triggered, you can obtain a property named wheelDelta, it indicates the size changed by the scroll wheel. A positive value indicates that the scroll wheel slides down, and a negative value indicates that the scroll wheel slides up. The larger the absolute value, the larger the sliding range.

Unfortunately, there is still a browser that does not support scroll wheel events. That is FireFox. Mozilla has implemented the processing of an event named "DOMMouseScroll". It will pass an event parameter named event with the detail attribute. However, this detail attribute is different from that of wheelDelta, it can only return a positive value, that is, it can only stick to the scroll down value.

You should pay special attention to the fact that Apple also disabled the mouse scroll control on the Safari browser to slide up and down the page, but this function is still in normal use in the webkit engine, therefore, the code you write will not trigger any problems.

How to add a scroll wheel event
First, add an image to the webpage. You can use the scroll wheel to control the scaling of the image.
 

Copy XML/HTML Code to clipboard

Now, add the code for processing the scroll wheel event.
 

Copy XML/HTML Code to clipboard

1. Var myimage = document. getElementById ("myimage ");
2. If (myimage. addEventListener ){
3. // IE9, Chrome, Safari, and Opera
4. Myimage. addEventListener ("mousewheel", MouseWheelHandler, false );
5. // Firefox
6. Myimage. addEventListener ("DOMMouseScroll", MouseWheelHandler, false );
7. }
8. // IE 6/7/8
9. Else myimage. attachEvent ("onmousewheel", MouseWheelHandler );

To enable support by different browsers

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

Copy XML/HTML Code to clipboard

1. Function MouseWheelHandler (e ){
2. // Cross-browser wheel delta
3. Var e = window. event | e; // old IE support
4. Var delta = Math. max (-1, Math. min (1, (e. wheelDelta |-e. detail )));

Now we can directly determine the image size range. The following code sets the image width range to 50-pixels
 

Copy XML/HTML Code to clipboard

1. Myimage. style. width = Math. max (50, Math. min (800, myimage. width + (30 * delta) + "px ";
2. Return false;
3. }

Finally, false is returned in the method to terminate the processing of the standard scroll wheel event, in case it slides up or down the webpage.
View the demo