Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use HTML5 to achieve the mouse wheel event zoom in and out of the picture function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Most browsers support mouse wheel events, so you can subscribe to the mouse wheel event method first. Every time the event is triggered, you can get a property called wheelDelta, which represents the size of the mouse wheel change just now, where a positive value indicates that the wheel slides down, and a negative value indicates that the wheel slides up. The larger the absolute value of the value, the larger the sliding range.

Unfortunately, there is still a browser that does not support mouse wheel events. That's FireFox. Mozilla has implemented the handling of an event called "DOMMouseScroll", which passes an event parameter named event with a property called detail. However, unlike wheelDelta, this detail property can only return a positive value, that is, it can only insist on the value of the mouse wheel scrolling down.

You should pay special attention to the fact that Apple also disables mouse scrolling to control page scrolling up and down in Safari browsers, but this feature is still used normally in webkit engines, so the code you write won't trigger any problems.

Add mouse wheel event handling method

First of all, let's add a picture to the web page, and then we can use the mouse wheel to control the zoom of the picture.

Now let's add the mouse wheel event handling code

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)

Processing practices that can be supported by different browsers

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

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 determine the size range of the picture. The following code sets the width range of the picture to between 50 and 800 pixels

Myimage.style.width = Math.max (50, Math.min (800, myimage.width + (30 * delta)) + "px"

Return false

}

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

Thank you for reading this article carefully. I hope the article "how to use HTML5 to zoom in and out pictures of mouse wheel events" is helpful to everyone. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.