教程集 > 脚本编程 > javascript > 正文 javascript 实现图片放大缩小代码

javascript 实现图片放大缩小代码

发布时间：2017-02-04 编辑：jiaochengji.com

教程集为您提供javascript 实现图片放大缩小代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript 实现图片放大缩小代码资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >javascript 实现图片放大缩小代码 <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, // 缩放次数 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>
</body> </html> </textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 实现图片放大缩小代码
 js 实现图片等比例缩放实例
 js动态获取图片width与height 等比例缩放的代码
 等比例缩小图片尺寸的js代码
 js结合css实现图片自动等比例缩小且垂直居中的代码
 Js 图片等比例缩小的实现代码
 php等比例缩放图片的示例参考
 js等比例缩小图片尺寸的例子
 js等比例缩放图片的实现方法
 php图片裁剪与缩略图示例

上一篇：浪微博头像tips的js特效下一篇：js 实现注册上一步，下一步方法

[关闭]

javascript 实现图片放大缩小代码

最近更新

浏览排行