图片放大镜效果代码

2007-11-30 22:44:35 作者：

 

<!-- *** 斩梦人.天天 [原创]分享 *** QQ:22062019 Email:takuma888@126.com *** *** 欢迎大家引用和改进,但希望大家能珍惜作者的劳动,最好能注明出处. *** 由于浏览器兼容性的问题,在FF和OP下表现不是很理想,没能完善,还请见谅. //--> <script language="JavaScript"> <!-- var srcX = 1024; //原图长宽 var srcY = 768; var bigX = 500; //原比例预览大小,可以设置成任意大小 var bigY = 300; var smallX = 256; //缩略图大小,要与原大小成比例 var smallY = 192; var viewX = bigX / srcX * smallX; //预览范围 var viewY = bigY / srcY * smallY; var bl = srcX / smallX;//缩小比例 var border = 8; //边框 window.onload=function (){ bigbox.style.borderWidth=border; bigbox.style.width=bigX+border*2; bigbox.style.height=bigY+border*2; smallpic.width=smallX; smallpic.height=smallY; view.style.width=viewX; view.style.height=viewY; smallbox.style.borderWidth=border; if (window.event){ smallbox.style.width=smallpic.offsetWidth+border*2; smallbox.style.height=smallpic.offsetHeight+border*2; }else{ smallbox.style.width=smallpic.offsetWidth; smallbox.style.height=smallpic.offsetHeight; } move(event); } function move(e){ var e = window.event?window.event:e; var iebug = 0; if (window.event){ var vX = e.offsetX - viewX/2; var vY = e.offsetY - viewY/2; }else{ var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border; var vY = e.pageY - viewY/2 - smallbox.offsetTop - border; iebug = 2; } if (vX < 0) vX = 0; if (vY < 0) vY = 0; if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug; if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug; view.style.left = vX + smallbox.offsetLeft + border; view.style.top = vY + smallbox.offsetTop + border; bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl; } //--> </script> <style type="text/css"> <!-- *{padding:0;margin:0} img{display:block;} #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden} #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('/upload/20071130224657571.jpg') no-repeat;} #view{border:1px #ddd solid;width:0px;height:0px;position:absolute} .head{text-align:center;line-height:40px;font:bold 16px/40px;color:red} //--> </style> <div class="head">图片放大效果</div> <div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div> <div id="bigbox"></div> <div id="view"></div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]