javascript 圖片放大縮小功能實(shí)現(xiàn)代碼

更新時(shí)間：2011年07月13日 23:28:57 作者：

很早以前寫的一個(gè)效果，今天有時(shí)間了整理出來通過 Math.pow(x,y) 的“冪”運(yùn)算來計(jì)算大小圖片放大縮小的尺寸

看JS源碼：

 
// 放大縮小控制 
var PhotoSize = { 
zoom: 0, // 縮放率 
count: 0, // 縮放次數(shù) 
cpu: 0, // 當(dāng)前縮放倍數(shù)值 
elem: "", // 圖片節(jié)點(diǎn) 
photoWidth: 0, // 圖片初始寬度記錄 
photoHeight: 0, // 圖片初始高度記錄 

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

this.zoom = 1.2; // 設(shè)置基本參數(shù) 
this.count = 0; 
this.cpu = 1; 
}, 

action: function(x){ 
if(x === 0){ 
this.cpu = 1; 
this.count = 0; 
}else{ 
this.count += x; // 添加記錄 
this.cpu = Math.pow(this.zoom, this.count); // 任意次冪運(yùn)算 
}; 
this.elem.style.width = this.photoWidth * this.cpu +"px"; 
this.elem.style.height = this.photoHeight * this.cpu +"px"; 
} 
}; 
// 啟動(dòng)放大縮小效果 用onload方式加載，防止第一次點(diǎn)擊獲取不到圖片的寬高 
window.onload = function(){PhotoSize.init()}; 

建議最好采用onload方式引用，可以準(zhǔn)確讀到初始圖片的大小

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="auther" content="f7" /> <title>圖片放大縮小</title> <script type="text/javascript"> // 放大縮小控制 var PhotoSize = { zoom: 0, // 縮放率 count: 0, // 縮放次數(shù) cpu: 0, // 當(dāng)前縮放倍數(shù)值 elem: "", // 圖片節(jié)點(diǎn) photoWidth: 0, // 圖片初始寬度記錄 photoHeight: 0, // 圖片初始高度記錄 init: function(){ this.elem = document.getElementById("focusphoto"); this.photoWidth = this.elem.scrollWidth; this.photoHeight = this.elem.scrollHeight; this.zoom = 1.2; // 設(shè)置基本參數(shù) this.count = 0; this.cpu = 1; }, action: function(x){ if(x === 0){ this.cpu = 1; this.count = 0; }else{ this.count += x; // 添加記錄 this.cpu = Math.pow(this.zoom, this.count); // 任意次冪運(yùn)算 }; this.elem.style.width = this.photoWidth * this.cpu +"px"; this.elem.style.height = this.photoHeight * this.cpu +"px"; } }; // 啟動(dòng)放大縮小效果 用onload方式加載，防止第一次點(diǎn)擊獲取不到圖片的寬高 window.onload = function(){PhotoSize.init()}; </script> </head> <body> <input type="button" value="放大" onclick="PhotoSize.action(1);" /> <input type="button" value="縮小" onclick="PhotoSize.action(-1);" /> <input type="button" value="還原大小" onclick="PhotoSize.action(0);" /> <input type="button" value="查看當(dāng)前倍數(shù)" onclick="alert(PhotoSize.cpu);" /><br> <img id="focusphoto" src="/upload/201107/20110713233007487.jpg" /> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: