Using HTML5 to implement the function of zooming in and out of pictures using mouse wheel events_html5 tutorial skills

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

Look at 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 An attribute named wheelDelta, which represents the size of the mouse wheel just changed, where a positive value means the wheel slides down, and a negative value means the wheel slides up. The larger the absolute value of the value, the larger the sliding range.

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

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

Add mouse wheel event handling method
First we add an image to the web page, and later we can use the mouse wheel to control the zoom of the image

XML/HTML CodeCopy content to clipboard

1. img id="myimage" src="myimage.jpg" alt="my image" />

Now add the mouse wheel event handling code

XML/HTML CodeCopy content to clipboard

1. var myimage = document.getElementById("myimage");
2. if (myimage.addEventListener) {
3. // IE9, Chrome, Safari, 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);

In order to support different browsers

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

XML/HTML CodeCopy content 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 directly determine the size range of the image. The following code sets the width range of the image between 50-800 pixels

XML/HTML CodeCopy content to clipboard

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

Last point, we return false in the method to terminate the standard mouse wheel event processing to prevent it from sliding the web page up and down.
View actual demonstration