快捷導(dǎo)航

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)確讀到初始圖片的大小

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

您可能感興趣的文章:

相關(guān)文章

圖片上傳即時(shí)顯示縮略圖的js代碼
主要用于上傳圖片的過程中可以顯示圖片，這樣就可以確認(rèn)圖片有沒有遠(yuǎn)錯(cuò)，利用提高正確率。
2009-05-05
DHTML Slide Show script圖片輪換
2008-03-03
在圖片上單擊獲取圖片原始大小
在圖片上單擊鼠標(biāo)，獲取圖片的原始尺寸大小，變通一下我們可以實(shí)現(xiàn)讓圖片隨網(wǎng)頁的大小而自動(dòng)適應(yīng)，我們可以判斷如果圖片超出規(guī)定大小，則強(qiáng)制壓縮圖片，運(yùn)行一下看效果吧。
2009-10-10
常見JS效果之圖片減速度滾動(dòng)實(shí)現(xiàn)代碼
圖片減速度滾動(dòng),一般用于產(chǎn)品的展示效果。作為前端，互聯(lián)網(wǎng)上一些常見效果都要嘗試去實(shí)現(xiàn)，不能因?yàn)楣居貌坏骄筒蛔觥?/div> 2011-12-12
javascript檢測(cè)(控制 )上傳文件大小
用戶客戶端檢測(cè)圖片的大小，實(shí)際應(yīng)用中，服務(wù)器端測(cè)試仍必不可少。
2009-12-12
多圖幻燈Wipe擦洗效果
多圖幻燈Wipe擦洗效果...
2006-12-12
用dom+xhtml+css制作的一個(gè)相冊(cè)效果代碼打包下載
2008-01-01
JavaScript圖片放大鏡效果代碼[代碼比較簡單]
實(shí)用漂亮的放大鏡效果，基于JavaScript代碼實(shí)現(xiàn)，貌似代碼不太多，但效果確實(shí)不錯(cuò)，因調(diào)用的圖片比較大，所以運(yùn)行效果后請(qǐng)稍等一會(huì)，等待圖片加載。
2011-02-02
完全用CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片并更換圖片
CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片，更換圖片，這是一個(gè)完全用CSS實(shí)現(xiàn)的效果,由此我們可以制作一些效果復(fù)雜的按鈕，比如換色按鈕
2012-12-12
非常漂亮的JS代碼經(jīng)典廣告
非常漂亮的JS代碼經(jīng)典廣告...
2007-10-10