The code is as follows:
Copy Code code as follows:
/*!
*author:sohighthesky
*blog:http://www.cnblogs.com/sohighthesky
*date:2010-2-4
*/
var zooming=function (e) {
e=window.event | | E
var O=this,data=e.wheeldelta | | E.detail*40,zoom,size;
if (!+ ' \v1 ') {
Zoom = parseint (o.style.zoom) | | 100;
Zoom + = DATA/12;
if (Zoom > Zooming.min)
O.style.zoom = zoom + '% ';
}else {
Size=o.getattribute ("_zoomsize"). Split (",");
Zoom=parseint (O.getattribute ("_zoom")) | | 100;
ZOOM+=DATA/12;
if (zoom>zooming.min) {
O.setattribute ("_zoom", zoom);
o.style.width=size[0]*zoom/100+ "px";
o.style.height=size[1]*zoom/100+ "px";
}
}
};
Zooming.add=function (obj,min) {//The first parameter specifies a picture that can be scaled, min specifies the minimum scale size, default to 50
Zooming.min=min | | 50;
obj.onmousewheel=zooming;
if (/a/[-1]== ' a ')//if Firefox
Obj.addeventlistener ("Dommousescroll", Zooming,false);
if (-[1,]) {//if not IE
Obj.setattribute ("_zoomsize", obj.offsetwidth+ "," +obj.offsetheight);
}
};
Window.onload=function () {//Put in onload, otherwise the picture size error cannot be computed in non IE
Zooming.add (document.getElementById ("TESTIMG1"));
}
Demo Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> mouse Scrolling zoom picture </title> <meta NA Me= "Author" content= "Sohighthesky"/> <meta name= "Keywords" mouse Scrolling zoom picture, compatible content= " > <style type= "text/css" >/* Pre style*/BODY,TH,TD {font-size:12px;font-family:verdana,tahoma,arial, ' \5b8b\ 4f53 ', ' \5fae\8f6f\96c5\9ed1 ', Sans-serif} body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p {margin:0; padding:0;} Li {list-style-type:none;} A {color: #3366CC; text-decoration:none;} a:hover {color: #FF6600; text-decoration:underline;} /************************************************************/#div1 {width:300px;margin:100px 35%;line-height : 22px;} </style> </pead> <body> <div id= "Div1" > <div> Default Minimum zoom to original picture 50%</div> <div> Cloud Habitat </div> </div> </body> <script type= "Text/javascript" > (function () {/*! *author:sohighthesky *blog:http://www.cnblogs.com/sohighthesky *date:2010-2-4 * * var zooming=function (e) {e=window.e Vent | | E var O=this,data=e.wheeldelta | | E.detail*40,zoom,size; if (!+ ' \v1 ') {//ie zoom = parseint (o.style.zoom) | | 100; Zoom + = DATA/12; if (Zoom > zooming.min) o.style.zoom = zoom + '% '; }else {size=o.getattribute ("_zoomsize"). Split (","); Zoom=parseint (O.getattribute ("_zoom")) | | 100; ZOOM+=DATA/12; if (zoom>zooming.min) {O.setattribute ("_zoom", zoom); o.style.width=size[0]*zoom/100+ "px"; o.style.height=size[1]*zoom/100+ "px"; } } }; Zooming.add=function (obj,min) {//The first parameter specifies a picture that can be scaled, min specifies the minimum scaled size, default to Zooming.min=min | | 50; obj.onmousewheel=zooming; if (/a/[-1]== ' a ')//if Firefox obj.addeventlistener ("Dommousescroll", Zooming,false); if (-[1,]) {//if not IE obj.setattribute ("_zoomsize", obj.offsetwidth+ "," +obj.offsetheight); } }; Window.onload=function () {///in onload, otherwise you cannot calculate the picture size error Zooming.add (document.getElementById ("TESTIMG1") in non IE); }) () </script> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
PS: Because this page has a scroll bar, so if placed directly in the page, will scroll the page instead of the picture, do not know what to solve
