Home > Developer > Web Develop
Have always wanted to write a picture to zoom in and zoom out of the gadget, originally thought it would be very complex, these days I think about it, the original is so easy ah. The current implementation of the zoom reduction, mainly based on the mouse wheel trigger events to achieve, less nonsense to say directly on the source.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> image zoom in and zoom out </title>
<style type= "Text/css" >
*{
margin:0; padding:0;
}
Body {
width:100%; height:100%; Overflow:auto;
}
#img {
Display:block;
width:20%;
margin:20px Auto;
cursor:-webkit-zoom-in;
cursor:-moz-zoom-in;
BORDER:4PX solid #ccc;
}
</style>
<script src= "./jquery/jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var img=$ ("#img");
var i=0;
Img.bind (' Dommousescroll mousewheel function (e) {
var ev=window.event| | e;//Handling Browser compatibility issues
var Scrollunit=math.max ( -1,math.min (1, (ev.wheeldelta| | (-ev.detail)));
var Newwith=math.max (100,math.min (1600,parseint (img.css ("width")) + (30*scrollunit)) + "px";
Img.css ("width", newwith);
Console.log (i++);
Console.log (Img.css ("width"));
});
});
</script>
<body>
</body>
For the source code, do a few notes and add:
1,ev.wheeldelta and Ev.detail
Ev.wheeldelta, except Firefox browser Ie,chrome,opera, Safari basic Support Properties, this property value is +,-, 120;
Ev.detail, for Firefox unique event attributes, the value of +,-3;
2,math.min,math.max
This place to take the maximum and minimum value, it is best to figure it out, a little bit around.
3, zoom in and out of multiple and maximum problems
1 and 1 control the zoom-in and zoom-out rate, the larger the absolute value, the more obvious the scaling effect.
The 100,1600, respectively, are the minimized and enlarged maximum values.
So much more, and we welcome your valuable suggestions and ideas.
This article from the "7439523" blog, reproduced please contact the author!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
