我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。 复制代码 代码如下: 放大镜 <BR>/*重置{*/ <BR>html{color:#000;background:#fff;} <BR>body,div{padding:0;margin:0;} <BR>img{border:none;} <BR>/*}重置*/ <BR>.outer{width:200px;height:150px;position:relative;margin:20px auto;} <BR>.inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;} <BR>.aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;} <BR>.imgs{position:absolute;} <BR>.outer img{width:200px;height:150px;} <BR> <BR>var outer=document.getElementById("outer"); <BR>var inner=document.getElementById("inner"); <BR>var aa=document.getElementById("aa"); <BR>var imgs=document.getElementById("imgs"); <BR>var x,y,n=false; <BR>inner.onmousedown=test1;//如果把inner改为document,鼠标在窗口任意位置点击，图片都会跟随 <BR>document.onmousemove=test2;//document如果改为outer,鼠标在outer内才起作用 <BR>document.onmouseup=test3; <BR>function test1(event){//鼠标按下时方法 <BR>var event=event || window.event;//调试兼容,各个浏览器认识event有差别. <BR>n=true;//当n=true（n的值可随便设定）时，假定为鼠标按下的事件 <BR>x=event.clientX-inner.offsetLeft;//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距 <BR>y=event.clientY-inner.offsetTop;//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距 <BR>} <BR>function test2(event){//鼠标移动时方法 <BR>var event=event || window.event; <BR>if(n==true){ <BR>////////鼠标移动范围 <BR>inner.style.left=event.clientX-x+"px"; <BR>inner.style.top=event.clientY-y+"px"; <BR>////////图片移动范围 <BR>imgs.style.left=-4*parseInt(inner.style.left)+"px"; <BR>imgs.style.top=-4*parseInt(inner.style.top)+"px"; <BR>////////////////////////////限定鼠标移动的范围 <BR>if(parseInt(inner.style.left)<0){ <BR>inner.style.left=0+"px"; <BR>} <BR>if(parseInt(inner.style.top)<0){ <BR>inner.style.top=0+"px"; <BR>} <BR>if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){ <BR>inner.style.left=outer.clientWidth-inner.clientWidth+"px"; <BR>} <BR>if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){ <BR>inner.style.top=outer.clientHeight-inner.clientHeight+"px"; <BR>} <BR>//////////////////////////////限定图片移动的范围 <BR>if(parseInt(imgs.style.left)>0){ <BR>imgs.style.left=0+"px"; <BR>} <BR>if(parseInt(imgs.style.top)>0){ <BR>imgs.style.top=0+"px"; <BR>} <BR>if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){ <BR>imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px"; <BR>} <BR>if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){ <BR>imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px"; <BR>} <BR>} <BR>} <BR>function test3(){//鼠标松开时方法 <BR>n=false; <BR>} <BR>
