Home > Web Front-end > JS Tutorial > body text

javascript image zoom function implementation code_image special effects

WBOY
Release: 2016-05-16 18:04:42
Original
1148 people have browsed it

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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template