Javascript Image zoom-in and zoom-out code

View JS source code: Copy codeThe Code is as follows: // zoom in and out control
Var PhotoSize = {
Zoom: 0, // zoom Rate
Count: 0, // Number of zooming times
Cpu: 0, // current zoom factor
Elem: "", // image Node
PhotoWidth: 0, // The initial width of the image.
PhotoHeight: 0, // The initial height of the image.

Init: function (){
This. elem = document. getElementById ("focusphoto ");
This. photoWidth = this. elem. scrollWidth;
This. photoHeight = this. elem. scrollHeight;

This. zoom = 1.2; // Set Basic parameters
This. count = 0;
This. cpu = 1;
},

Action: function (x ){
If (x = 0 ){
This. cpu = 1;
This. count = 0;
} Else {
This. count + = x; // Add record
This. cpu = Math. pow (this. zoom, this. count); // any power operation
};
This. elem. style. width = this. photoWidth * this. cpu + "px ";
This. elem. style. height = this. photoHeight * this. cpu + "px ";
}
};
// Enable the zoom-in and zoom-out effect to be loaded using the onload method to prevent the width and height of the image from being retrieved by the first click.
Window. onload = function () {PhotoSize. init ()};

We recommend that you use the onload Method for reference to read the size of the initial image.<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <meta name =" auther "content =" f7 "> <input type =" button "value =" Enlarge "onclick =" PhotoSize. action (1); "> <input type =" button "value =" "onclick =" PhotoSize. action (-1); "> <input type =" button "value =" Restore size "onclick =" PhotoSize. action (0); "> <input type =" button "value =" view current multiple "onclick =" alert (PhotoSize. cpu); "> <br/>