看JS源码: 复制代码 代码如下: // 放大缩小控制 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()}; 建议最好采用onload方式引用,可以准确读到初始图片的大小
图片放大缩小
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
jquery attr 设定src中含有&(宏)符号问题的解决方法
问题描述: html代码如下: <iframe src="http://www.jb51.net" id="addOrUpdateIframe" style="width:870px;height:450px;" border="0" scrolling="yes" ></iframe> 我用 jquery 的attr 方法设定 iframe的src属性>>>详细阅读
本文标题:javascript 图片放大缩小功能实现代码
地址:http://www.17bianji.com/kaifa2/JS/24391.html
1/2 1