javascript image zoom function implementation code_image special effects

Look at the JS source code:

Copy code The code is as follows:

// Zoom in and out control
var PhotoSize = {
zoom: 0, // Zoom rate
count: 0, // Number of zooms
cpu: 0, // Current zoom multiple value
elem: "", // Picture Node
photoWidth: 0, // Initial width record of picture
photoHeight: 0, // Initial height record of picture

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";
}
};
// Start the zoom effect and load it in onload mode to prevent the first click from not getting the width and height of the image
window.onload = function(){PhotoSize.init()};

It is recommended to use onload method to reference, which can accurately read the size of the initial image

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="auther" content="f7"> <title>Zoom in and out of pictures</title> <input type="button" value="">