提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大鏡</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> /*重設{*/ html{color:#000;background:#fff;} body,div{padding:0;margin:0;} img{border:none;} /*}重設*/ .outer{width:200px;height:150px;position:relative;margin:20px auto;} .inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;} .aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;} .imgs{position:absolute;} .outer img{width:200px;height:150px;} </style> </head> <body> <div> <div class="outer" id="outer"> <div class="inner" id="inner"></div> </div> <div class="aa" id="aa"> <div class="imgs" id="imgs" ></div> </div> </div> <script type="text/javascript"> var outer=document.getElementById("outer"); var inner=document.getElementById("inner"); var aa=document.getElementById("aa"); var imgs=document.getElementById("imgs"); var x,y,n=false; inner.onmousedown=test1;//如果把inner改為document,滑鼠在視窗任意位置點擊，圖片都會跟隨 document.onmousemove=test2;//document如果改為outer,滑鼠在outer內才起作用 document.onmouseup=test3; function test1(event){//滑鼠按下時方法 var event=event || window.event;//調試相容,各個瀏覽器認識event有差別. n=true;//當n=true（n的值可隨便設定）時，假定為滑鼠按下的事件 x=event.clientX-inner.offsetLeft;//滑鼠在透明層的相對橫座標=滑鼠座標-方塊左邊距 y=event.clientY-inner.offsetTop;//滑鼠在透明層的相對縱座標=滑鼠座標-方塊上邊距 } function test2(event){//滑鼠移動時方法 var event=event || window.event; if(n==true){ ////////滑鼠移動範圍 inner.style.left=event.clientX-x+"px"; inner.style.top=event.clientY-y+"px"; ////////圖片移動範圍 imgs.style.left=-4*parseInt(inner.style.left)+"px"; imgs.style.top=-4*parseInt(inner.style.top)+"px"; ////////////////////////////限定滑鼠移動的範圍 if(parseInt(inner.style.left)<0){ inner.style.left=0+"px"; } if(parseInt(inner.style.top)<0){ inner.style.top=0+"px"; } if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){ inner.style.left=outer.clientWidth-inner.clientWidth+"px"; } if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){ inner.style.top=outer.clientHeight-inner.clientHeight+"px"; } //////////////////////////////限定圖片移動的範圍 if(parseInt(imgs.style.left)>0){ imgs.style.left=0+"px"; } if(parseInt(imgs.style.top)>0){ imgs.style.top=0+"px"; } if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){ imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px"; } if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){ imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px"; } } } function test3(){//滑鼠鬆開時方法 n=false; } </script> </body> </html></td> </tr></table>
提示：您可以先修改部分代碼再運行
