javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 20:59:51

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效:看JS源碼：代碼如下: // 放大縮小控制 var PhotoSize = { zoom: 0, // 縮放率 count: 0, // 縮放次數(shù) cpu: 0, // 當前縮放倍數(shù)值 elem: , // 圖片節(jié)點 photoWidth: 0, // 圖片初始寬度記錄 photoHeight: 0, // 圖片初始高

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效:看JS源碼：代碼如下: // 放大縮小控制 var PhotoSize = { zoom: 0, // 縮放率 count: 0, // 縮放次數(shù) cpu: 0, // 當前縮放倍數(shù)值 elem: , // 圖片節(jié)點 photoWidth: 0, // 圖片初始寬度記錄 photoHeight: 0, // 圖片初始高

看JS源碼：
代碼如下:
// 放大縮小控制
var PhotoSize = {
zoom: 0, // 縮放率
count: 0, // 縮放次數(shù)
cpu: 0, // 當前縮放倍數(shù)值
elem: "", // 圖片節(jié)點
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ù)
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); // 任意次冪運算
};
this.elem.style.width = this.photoWidth * this.cpu +"px";
this.elem.style.height = this.photoHeight * this.cpu +"px";
}
};
// 啟動放大縮小效果用onload方式加載，防止第一次點擊獲取不到圖片的寬高
window.onload = function(){PhotoSize.init()};

建議最好采用onload方式引用，可以準確讀到初始圖片的大小
<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, // 當前縮放倍數(shù)值 elem: "", // 圖片節(jié)點 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ù) 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); // 任意次冪運算 }; this.elem.style.width = this.photoWidth * this.cpu +"px"; this.elem.style.height = this.photoHeight * this.cpu +"px"; } }; // 啟動放大縮小效果用onload方式加載，防止第一次點擊獲取不到圖片的寬高 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="查看當前倍數(shù)" onclick="alert(PhotoSize.cpu);" /><br> <img id="focusphoto" src="http://files.jb51.net/upload/201107/20110713233007487.jpg" /> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

推薦度：

點擊下載本文 文檔為doc格式

標簽：圖片 js 代碼

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

javascript圖片放大縮小功能實現(xiàn)代碼_圖象特效

最新推薦

猜你喜歡

熱門推薦