Home > Developer > JavaScript
View JS source code:
Copy codeThe Code is as follows:
// Zoom in/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.
<! Doctype html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <meta name =" auther "content =" f7 "/> <title> zoom in and out the image </title> </pead> <body> <input type = "button" value = "zoom in" 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> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
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
