我的大致思路是：時時監聽滑鼠的座標，當滑鼠移動時，透明層會隨著滑鼠移動，大圖片相對透明層的移動而移動。不廢話了，看程式碼。 複製程式碼 程式碼如下: 放大鏡 <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:abute ;} <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("aa"); <BR>var imgs=document.getElementById("imgsById("imgsById("imgsById("imgsById("imgsById" "); <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=outerer .clientHeight-inner.clientHeight "px"; <BR>} <BR>///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////1移動的範圍<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>}
