See JS Source:
Copy Code code as follows:
Zoom in and zoom out control
var photosize = {
zoom:0,//Zoom rate
count:0,//Zoom times
cpu:0,//Current zoom times value
Elem: "",//Picture node
photowidth:0,//Picture initial width record
photoheight:0,//Picture initial height record
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 a record
THIS.CPU = Math.pow (This.zoom, This.count); Arbitrary power operation
};
This.elem.style.width = this.photowidth * this.cpu + "px";
This.elem.style.height = this.photoheight * this.cpu + "px";
}
};
Start zoom to reduce the effect of the onload loading, to prevent the first click to get no picture of the wide height
Window.onload = function () {photosize.init ()};
It is advisable to use the OnLoad method reference, you can accurately read the size of the original picture
<!doctype html> <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/> <meta name=" Auther "content=" F7 "/> <title> picture Zoom out </title> <script type=" Tex T/javascript ">//Zoom Out control var photosize = {zoom:0,//Zoom rate count:0,//Zoom times cpu:0,//Current zoom value Elem:" ",//Picture node photowidth:0,//Picture initial width record photoheight:0,//Picture initial height record init:function () {This.elem = document.getElementById ("FOCUSPH Oto "); This.photowidth = This.elem.scrollWidth; This.photoheight = This.elem.scrollHeight; This.zoom = 1.2; Set basic parameter 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 zoom in to reduce the effect of the onload loading, to prevent the first click to get the picture's width window.onload = function () {photosize.inIt ()}; </script> </pead> <body> <input type= "button" value= "enlarge" onclick= "photosize.action (1);"/> ; Input type= "button" value= "onclick=" photosize.action ( -1); "/> <input" button "type=" Restore Size "value=" Photosize.action (0); "/> <input type=" button "value=" View current multiple "onclick=" alert (PHOTOSIZE.CPU); "/><br> & Lt;/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
