|
先看看Demo和效果图： http://www.besteast.com/demo/1.htm 难点在圆形，因为大图超出圆形区域的部分无法遮罩。 废话少说，直接爆原理： 1. Firefox和Chrome中，用 css -moz-border-radius:105px; 来实现一个圆形DIV容器，然后把图片作为容器的背景图片，移动的时候，调整对象的 backgroundPosition;
2. IE中，用 Chroma 滤镜配合一个四角PNG来使四个圆角透明 <div style="filter:chroma(color=red);background:url("大图地址")"><img src="四个圆角区域为红色，中间圆形区域透明的PNG图片"/></div> 这里贴出源码：  Code<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>放大镜演示</title> <!--[if !mso]> <style> v\:*{behavior:url(#default#VML)} </style> <![endif]--> <script type="text/javascript" src="http://admin.membrane-solutions.com/public/"></script> <script type="text/javascript" src="http://admin.membrane-solutions.com/public/js/jquery.Drag.js"></script> </head> <body> <div id="divBox" style="position:absolute;left:100px;top:100px;"> <div id="divBG" style="background:url('sky.jpg') no-repeat;width:512px;height:384px;position:absolute;left:0px;top:0px;"><img src="sky.jpg" width="512" height="384"/></div> <div id="divMask" style="background:#FFF;width:512px;height:384px;position:absolute;left:0px;top:0px;"></div> <div style="position:absolute;left:0px;top:0px;width:155px;height:158px;cursor:pointer;" id="divM"> <div style="width:210px;height:210px;background:url('sky.jpg') no-repeat -100px -100px;position:absolute;-moz-border-radius:105px;-webkit-border-radius:105px;border-radius:105px;left:0px;top:0px;z-index:1;filter:chroma(color=red);" id="divP"><img src="red.png"/></div> <div style="width:239px;height:239px;background:url('r.png') no-repeat;position:absolute;left:-13px;top:-13px;z-index:2;"></div> </div> </div> </body> <script language="javascript"> /*Copyright by 疯子阿飞 xiarugu@163.com */ function class_Form($) { var divM=$("#divM"); var divBox=$("#divBox"); var divP=document.getElementById("divP"); this.Init=function() { $("#divMask").fadeTo(0,0.7); if(!$.browser.msie) $(divP).find("img").hide(); var pos=divBox.offset(); divBox[0].pos=pos; //divBox.bind("mousemove",divM_Drag); divM.bind("drag",divM_Drag); } function divM_Drag(e) { //e.offsetX=e.clientX-this.pos.left-110; //e.offsetY=e.clientY-this.pos.top-110; var w=-50; var mX=512-155; var mY=384-155; var x=e.offsetX-divBox[0].pos.left; var y=e.offsetY-divBox[0].pos.top; if(x<w) x=w; else if(x>mX) x=mX; if(y<w) y=w; else if(y>mY) y=mY; divM[0].style.left=x+"px"; divM[0].style.top=y+"px"; x=x*2+100; y=y*2+100; divP.style.backgroundPosition=(-x)+"px "+(-y)+"px"; } } $.Init(class_Form); </script> </html> |
