1 <html>
2 <head>
3 <title>图片放大缩小</title>
4 <script type="text/javascript">
5 var PhotoSize = {
6 zoom: 0, // 缩放率
7 count: 0, // 缩放次数
8 cpu: 0, // 当前缩放倍数值
9 elem: "", // 图片节点
10 photoWidth: 0, // 图片初始宽度记录
11 photoHeight: 0, // 图片初始高度记录
12
13 init: function(){
14 this.elem = document.getElementById("focusphoto");
15 this.photoWidth = this.elem.scrollWidth;
16 this.photoHeight = this.elem.scrollHeight;
17
18 this.zoom = 1.2; // 设置基本参数
19 this.count = 0;
20 this.cpu = 1;
21 },
22
23 action: function(x){
24 if(x === 0){
25 this.cpu = 1;
26 this.count = 0;
27 }else{
28 this.count += x; // 添加记录
29 this.cpu = Math.pow(this.zoom, this.count); // 任意次幂运算
30 };
31 this.elem.style.width = this.photoWidth * this.cpu +"px";
32 this.elem.style.height = this.photoHeight * this.cpu +"px";
33 }
34 };
35 // 启动放大缩小效果,用onload方式加载，防止第一次点击获取不到图片的宽高
36 window.onload = function(){PhotoSize.init()};
37 </script>
38 </head>
39 <body>
40 <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="查看当前倍数" onclick="alert(PhotoSize.cpu);" /><br />
41 <img id="focusphoto" src="http://www.codefans.net/jscss/demoimg/demoimg.jpg" />
42 </body>
43 </html>
代码
