《更清晰的f放大效果》由会员分享，可在线阅读，更多相关《更清晰的f放大效果（7页珍藏版）》请在金锄头文库上搜索。
1、更清晰的更清晰的 f f 放大效果放大效果.img_warp width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;.img_warpposition:relative;top:0px; left:0px;/*cursor:crosshair*/.img_warp .current width:318px;height:199pxvar $E = fun
2、ction(opts)function _(objId)return (typeof objId = “string“)?document.getElementById(objId):objId;var beImg,expand,clip,cover,warp,expImg;var clipWidth,clipHeight;var closeTimeId = null;var mult = 1; /图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整/init(function()beImg = _(opts.berviary);warp = beImg.parentNode;cover =
3、 document.createElement(“div“);warp.appendChild(cover);cover.style.position = “absolute“;cover.style.top = “0px“;cover.style.left = “0px“;cover.style.backgroundColor = “#ccc“;var opac = parseFloat(opts.opacity) | 0.3;cover.style.opacity = opac;cover.style.filter = “Alpha(Opacity=“ + opac * 100 + “)“
4、;cover.style.width = “100%“;cover.style.height = “100%“;cover.style.zIndex = 2;cover.style.visibility = “hidden“;clip = document.createElement(“img“);warp.appendChild(clip);clipWidth = (opts.clip clipHeight = (opts.clip clip.src = beImg.src;clip.className = beImg.className;clip.style.position = “abs
5、olute“;clip.style.top = “0px“;clip.style.left = “0px“;clip.style.clip = “rect(0px,“ + clipWidth + “,“ + clipHeight + “,0px)“;clip.style.backgroundColor = “#ccc“;clip.style.zIndex = 3;/ie 里面会变态的自动设置宽度和高度clip.removeAttribute(“width“);clip.removeAttribute(“height“);)();function layerPos(e)if(e.layerX e
6、lse return x:e.x,y:e.y;function absolutePos(e)if(e.pageX else var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop)
7、;return x:x,y:y;var showExpand = function(x,y,e)if(!expand)initExpand();expImg.style.left = (-1 * x) * mult + “px“;expImg.style.top = (-1 * y ) * mult + “px“;if(!opts.expand) | (!opts.expand.id)var aPos = absolutePos(e);expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + “px“;expand.style.
8、top = aPos.y + “px“;/初始化放大的 divfunction initExpand()if(opts.expand else expand = document.createElement(“div“);if(opts.expand expand.style.border = “1px solid #000“;expand.style.position = “absolute“;expand.style.left =“0“;expand.style.right = “0“;expand.style.display = “block“;document.body.appendC
9、hild(expand);if(clip.clientWidthclip.clientHeight)expand.style.width = clip.clientWidth + “px“;expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + “px“; else expand.style.height = clip.clientHeight + “px“;expand.style.width = clip.clientHeight * parseFloat(clipW
10、idth) / parseFloat(clipHeight) + “px“;expand.style.zIndex = 4;expand.style.overflow = “hidden“;if(expand.style.position != “relative“) expand.style.left = “0“;expand.style.top = “0“;expImg = document.createElement(“img“);expImg.src = beImg.src;expImg.style.position = “relative“;expImg.style.left = “
11、0px“;expImg.style.top = “0px“;expand.appendChild(expImg);expImg.removeAttribute(“width“);expImg.removeAttribute(“height“);/计算图片放大的倍数var ew = expand.clientWidth;var eh = expand.clientHeight;var cw = parseFloat(clipWidth);var ch = parseFloat(clipHeight);mult = (ew/cw warp.clientWidth - w) ? (warp.clie
12、ntWidth - w) : x;y = (y warp.clientHeight - h) ? (warp.clientHeight - h) : y;clip.style.clip = “rect(“ + (y - h) + “px,“ + (x + w) + “px,“ + (y + h) + “px,“ + (x - w) + “px)“;showExpand(x - w,y - h,e);warp.onmouseover = cover.onmouseover = clip.onmouseover = function()/如果清除的定时器存在,则删除.if(closeTimeId)
13、clearTimeout(closeTimeId);closeTimeId = null;if(cover.style.visibility = “hidden“)cover.style.visibility = “visible“;if(expand warp.onmouseout = function()/延迟一定时间后清除closeTimeId = setTimeout(function()cover.style.visibility = “hidden“;if(!opts.expand) | (!opts.expand.id)expand.style.display = “none“;,130);return clear:function()/在这里清除放大镜效果warp.removeChild(clip);warp.removeChild(cover);warp.onmouseout = null;if(!opts.expand) | (!opts.expand.id)expand.style.display = “none“;$E(berviary:“currentPic2“,clip:width:“100px“,height:“100px“,opacity:“0.4“);
