JavaScript控制图片放大,图片缩小,图片还原

发布时间：2018-08-21 14:33:12 所属栏目：Asp教程来源：站长网

导读：烈57火24网(LieHuo17.Net)教72程 Java Script代码实现对图片放大、缩小的控制，当点击放大的时候，图片会放大，点缩小则变小，连续点击则不断的放大，也可清除还原。这项功能是通过 Math.pow(x,y) 的幂运算来计算大小图片放大缩小的尺寸。演示： htmlhead

　　烈57火24网(LieHuo17.Net)教72程 JavaScript代码实现对图片放大、缩小的控制，当点击放大的时候，图片会放大，点缩小则变小，连续点击则不断的放大，也可清除还原。这项功能是通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸。

　　演示：

<html> <head> <title>图片放大缩小 - Liehuo.Net</title> <script type="text/javascript"> var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 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; // 设置基本参数 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="查看当前倍数" onclick="alert(PhotoSize.cpu);" /><br /> <img id="focusphoto" src="http://www.veryhuo.com/uploads/common/images/p1.jpg" /> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：周口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!