作家
登录

javascript 图片放大缩小功能实现代码

作者: 来源:www.28hudong.com 2013-03-30 00:48:45 阅读 我要评论

看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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)