Js Implementation of the mouse wheel to control the Image Scaling Effect
This article mainly introduces how to use javascript to control the image scaling effect by using the scroll wheel of the mouse. It involves the onmousewheel event and javascript image operation skills and has some reference value. For more information, see
This article describes how to use js to control the scaling effect of images with the scroll wheel. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Language" content = "zh-cn"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> use the scroll wheel to scroll down and zoom in the image </title>
<Script language = "javascript">
Function bbimg (o ){
Var zoom = parseInt (o. style. zoom, 10) || 100;
Zoom + = event. wheelDelta/12;
If (zoom> 0) o. style. zoom = zoom + '% ';
Return false;
}
</Script>
</Head>
<Body>
<P> place the mouse over the image, click it, and scroll the scroll wheel to try it. </p>
<P> </p>
<P> </p>
<P> </p>
<P> </p>
</Body>
</Html>
I hope this article will help you design javascript programs.