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

发布时间：2018-08-20 13:38:53 所属栏目：编程来源：站长网

导读：烈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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys