Use HTML5 to realize the function of enlarging and reducing pictures with mouse wheel events

You and I know that adding mouse wheel events to HTML5 web pages can better allow users to interact with web pages. In HTML5, the mouse scroll wheel not only can only slide up and down the web page. In fact, you can also rely on this to complete more functions, such as enlarging and reducing the field of view plane.

Check out the actual demonstration effect

Most browsers support mouse wheel events, so you can subscribe to the mouse wheel event method first. Whenever the event is triggered, you can get a property called wheelDelta, which represents the size of the mouse wheel just changed. A positive value indicates that the scroll wheel slides down, and a negative value indicates that the scroll wheel slides up. The greater the absolute value of the value, the greater the sliding range.

Unfortunately, there is still a browser that does not support mouse wheel events. That's FireFox. Mozilla has implemented the processing of an event called DOMMouseScroll, which will pass an event parameter named event with a property called detail. However, this detail property is different from wheelDelta, which can only return positive values, that is, it can only insist on the value of the mouse wheel scrolling downward.

You should pay special attention that Apple also disabled mouse scrolling to control page sliding up and down in Safari browser, but this function is still used normally in the webkit engine, so the code you write will not trigger any problems.

First, we add an image to the web page, and we can use the mouse wheel to control the zoom of this image later.