一个JS图片放大镜,实现动态记录的图片放大,避免内存泄露,解决IE6下无法遮盖select控件问题
2011-08-22 21:17
1236 查看
/** qsoft.PopBigImage version:0.35 author: kimmking@163.com date: 2009年3月25日3:54:50 version:1.1 author: dingherry@163.com date: 2011-8-22 20:05:42 功能描述: 一般页面的的图片为了布局考虑,显示大小都小于实际大小。 鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。 并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。 v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。 v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。 v0.3:实现了鼠标第一次进入图片时动态创建显示层。提供了一个静态创建方法。 v0.35:加入了对google chrome浏览器的支持。 v1.0:实现了IE下针对动态绑定图片的控件,避免IE内存泄露。 v1.1:修正了IE6下select控件无法遮盖的问题。 参数描述: origImageId: 要绑定的img对象的id dx:展示大图相对于绑定的img对象右方的x轴偏移量 dy:展示大图相对于绑定的img对象上方的y轴偏移量 mx:展示层的宽 mx在0到1之间时,取大图的宽*mx的值与小图的宽中的较大者 mx在1到10之间时,取小图的宽*mx的值与大图的宽中的较小者 mx大于10时,确保mx在大小图的宽之间,超出的话,取边界值 my:展示层的高 参照mx的值 bflag:create方法中渲染完后是否将展示层显示出来, 在onmouseover事件中使用true参数 在页面加载时初始化的话使用false参数 用法: 1、页面加载后统一预先加载,在页面上添加JavaScript脚本 window.onload = function(){ new qsoft.PopBigImage("orig",20,0,2,2).render(); //或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render(); } 或是 2、鼠标第一次进入图片时才加载本图片的显示层,在img标签中添加 onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);" **/ /** * 放大镜开关 */ var imgIsSelected = false; /** * 每次点击一个记录,都将图像保存给一个固定的对象(picMaxObject) 目的:防止IE内存泄露 */ var picMaxObject; /** * 图像对象,作用类似于picMaxObject */ var image = new Image(); /** * LOGO */ var qsoft = { version : 1.0, isIE : document.all ? true : false, prefx : 'qsoft', __id : 0, nextId : function() { return this.prefx + this.__id++; } } /** * 图像放大镜算法主程序 * * @param origImage * 图像标签<img id="" />的id * @param dx * 放大镜左上角水平坐标相对于<img id="" />标签右上角水平坐标的偏移量,正数在<img id="" />右边,负数在左边 * @param dy * 放大镜左上角垂直坐标相对于<img id="" />标签右上角垂直坐标的偏移量,正数在<img id="" />下边,负数在上边 * @param mx * 放大倍率 默认设置1即可 * @param my * 放大倍率 默认设置1即可 */ qsoft.PopBigImage = function(origImage, dx, dy, mx, my) { var type = typeof (origImage); if (type.toLowerCase() == "string") this.oim = document.getElementById(origImage); else this.oim = origImage; if (typeof (this.oim.pbi) != "undefined") return this.oim.pbi; this.id = qsoft.nextId(); this.oim.__maskid = this.id; this.oim.style.cursor = "crosshair"; this.ow = this.oim.width; this.oh = this.oim.height; this.detaX = (typeof (dx) == "undefined") ? 30 : dx; this.detaY = (typeof (dy) == "undefined") ? 0 : dy; var getPos = function(o) // for chrome { var x = 0, y = 0; do { x += o.offsetLeft; y += o.offsetTop; } while ((o = o.offsetParent)); return { left : x, top : y }; } this.getPosition = function(o) { return document.documentElement.getBoundingClientRect && o.getBoundingClientRect() || getPos(o); } var rect = this.getPosition(this.oim); this.ol = rect.left + this.detaX + this.ow - (qsoft.isIE ? 2 : 0); this.ot = rect.top + this.detaY - (qsoft.isIE ? 2 : 0); this.src = this.oim.src; this.getImageSize = function(img) { var size = {}; image.src = img.src; size.width = image.width; size.height = image.height; size.filesize = image.fileSize; return size; } var rsize = this.getImageSize(this.oim); this.w = rsize.width; this.h = rsize.height; this.maskX = (typeof (mx) == "undefined") ? this.ow : mx; this.maskY = (typeof (my) == "undefined") ? this.oh : my; if (this.maskX < 1) this.maskX = Math.ceil(this.w * this.maskX); else if (this.maskX < 10) this.maskX = Math.ceil(this.ow * this.maskX); if (this.maskY < 1) this.maskY = Math.ceil(this.h * this.maskY); else if (this.maskY < 10) this.maskY = Math.ceil(this.oh * this.maskY); this.maskX = this.maskX < this.ow ? this.ow : this.maskX; this.maskY = this.maskY < this.oh ? this.oh : this.maskY; this.maskX = this.maskX > this.w ? this.w : this.maskX; this.maskY = this.maskY > this.h ? this.h : this.maskY; var qObj = this; this.createMask = function() { if (typeof (this.mask) == "undefined") { this.mask = document.createElement("div"); this.mask.id = this.oim.__maskid + "_mask"; this.mask.style.position = "absolute"; this.mask.style.width = this.maskX + "px"; this.mask.style.height = this.maskY + "px"; this.mask.style.left = this.ol + "px"; this.mask.style.top = this.ot + "px"; this.mask.style.backgroundImage = "url(" + this.src + ")"; this.mask.style.backgroundRepeat = "no-repeat"; this.mask.style.display = "none"; this.mask.style.zIndex = 1000; // IE6下遮盖其他控件 this.mask.innerHTML = '<iframe style=\'width:100%;height:100%;position:absolute;z-index:-1;filter:alpha(opacity=0);border:none\' frameborder=\'no\' border=\'0\' ></iframe>'; document.body.appendChild(this.mask); } } this.regEvent = function() { this.oim.onmousemove = function() { var e = arguments[0] || window.event || top.event; ; var ct = e.target || e.srcElement; var sz = qObj.getPosition(ct); var ox = qsoft.isIE ? e.offsetX : (e.pageX - sz.left); var oy = qsoft.isIE ? e.offsetY : (e.pageY - sz.top); var x = Math.ceil(ox * qObj.w / qObj.ow) - qObj.maskX / 2; var y = Math.ceil(oy * qObj.h / qObj.oh) - qObj.maskY / 2; if (x < 0) x = 0; if (y < 0) y = 0; var maxx = Math.ceil((qObj.w - qObj.maskX)); var maxy = Math.ceil((qObj.h - qObj.maskY)); if (x > maxx) x = maxx; if (y > maxy) y = maxy; qObj.mask.style.backgroundPosition = -x + "px " + -y + "px"; sz = null; delete dz; } this.oim.onmouseout = function() { qObj.mask.style.display = "none"; } this.oim.onmouseover = function() { if (!imgIsSelected) { qObj.mask.style.display = "none"; } else { qObj.mask.style.display = "block"; } } } this.render = function() { this.createMask(); this.regEvent(); } this.resize = function(origImage) { this.oim = document.getElementById(origImage); if (this.src == this.oim.src) { return; } if (this.oim.readyState == "uninitialized") { while (this.oim.readyState == "complete") { break; } } if (typeof (this.oim.pbi) != "undefined") return this.oim.pbi; this.oim.style.cursor = "crosshair"; this.ow = this.oim.width; this.oh = this.oim.height; this.detaX = (typeof (dx) == "undefined") ? 30 : dx; this.detaY = (typeof (dy) == "undefined") ? 0 : dy; var rect = this.getPosition(this.oim); this.ol = rect.left + this.detaX + this.ow - (qsoft.isIE ? 2 : 0); this.ot = rect.top + this.detaY - (qsoft.isIE ? 2 : 0); this.src = this.oim.src; var rsize = this.getImageSize(this.oim); this.w = rsize.width; this.h = rsize.height; this.maskX = (typeof (mx) == "undefined") ? this.ow : mx; this.maskY = (typeof (my) == "undefined") ? this.oh : my; if (this.maskX < 1) this.maskX = Math.ceil(this.w * this.maskX); else if (this.maskX < 10) this.maskX = Math.ceil(this.ow * this.maskX); if (this.maskY < 1) this.maskY = Math.ceil(this.h * this.maskY); else if (this.maskY < 10) this.maskY = Math.ceil(this.oh * this.maskY); this.maskX = this.maskX < this.ow ? this.ow : this.maskX; this.maskY = this.maskY < this.oh ? this.oh : this.maskY; this.maskX = this.maskX > this.w ? this.w : this.maskX; this.maskY = this.maskY > this.h ? this.h : this.maskY; this.mask.style.width = this.maskX + "px"; this.mask.style.height = this.maskY + "px"; this.mask.style.left = this.ol + "px"; this.mask.style.top = this.ot + "px"; this.mask.style.backgroundImage = "url(" + this.src + ")"; this.mask.style.backgroundRepeat = "no-repeat"; rect = null; delete rect; } } /** * 图片放大镜主程序 * * @param origImage * 图像标签<img id="" />的id * @param dx * 放大镜左上角水平坐标相对于<img id="" />标签右上角水平坐标的偏移量,正数在<img id="" />右边,负数在左边 * @param dy * 放大镜左上角垂直坐标相对于<img id="" />标签右上角垂直坐标的偏移量,正数在<img id="" />下边,负数在上边 * @param mx * 放大倍率 默认设置1即可 * @param my * 放大倍率 默认设置1即可 * @param bflag * 是否打开 * @return qsoft.PopBigImage */ qsoft.PopBigImage.create = function(origImage, dx, dy, mx, my, bflag) { var q = new qsoft.PopBigImage(origImage, dx, dy, mx, my); q.render(); if (bflag) q.mask.style.display = "block"; picMaxObject = q; return q; }
相关文章推荐
- 一个JS图片放大镜,实现动态记录的图片放大,避免内存泄露,解决IE6下无法遮盖select控件问题
- Ext界面下做图片动态加载的图片放大镜效果并解决IE6下遮罩mask无法遮盖HTML的select控件问题
- 实现ipad上的内嵌webview手势缩放图片(修改版,解决在第一张图片放大的情况下翻到下一张图片无法放大的问题) 基于Quo(js库)
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- Ext界面做图片动态加载的图片放大镜效果并解决JS内存泄漏问题
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- 解决IE6下JS动态设置图片IMG的SRC时图片无法加载错误的方法
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- IE6 select穿透问题(div 定位无法遮盖select)!
- 如何解决Qt 4GUI程序中动态创建内存的泄露问题
- 避免网站在IE6中出现‘无法打开站点,已终止操作’的JS问题
- asp使用js时间控件,实现下拉日历 解决UTF-8和GB2312的编码问题
- 解决嵌入WinForm的WPF控件无法显示图片问题
- 记录java上传图片第一时间无法展示的问题以及解决办法
- 解决element UI tree控件无单选API,无法实现单选问题
- ie6下png图片背景不透明的解决办法使用js实现
- 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码
- 解决IE6下DIV无法实现1px高度问题
- node.js内存泄露问题记录
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件