拖拽的原理就是捕捉鼠標的座標，然後把座標傳給要拖拽的標籤A。
放大鏡的原理就是在拖拽的基礎上，把A的窗口在另外一個標籤B成倍數的擴大。原理就是先獲取鼠標離A的距離x方向d1，y方向d2,當鼠標移動到別的位置時候用當前座標減去d1,d2就可以得到現在div的left和top。只要讓B的left和top是A的倍數就可以了。
代碼：
- <style>
- body,div,img{margin:0;padding:0;border:none;}
- .outer{position:relative;height:800px;width:800px;margin:100px auto;}
- #outer1{height:202px;width:202px;float:left;position:relative;border:1px red solid;}
- .img1{height:200px;width:200px;display:block;margin:0 auto;}
- #in1{height:50px;width:50px;cursor:move;border:1px black solid;position:absolute;left:0;top:0;background:white;opacity:0.5;}
- #outer2{float:left;height:200px;width:200px;border:1px red solid;display:none;overflow:hidden;margin-left:30px;}
- #in2{height:808px;width:808px;border:1px red solid;position:relative;}
- .img2{height:800px;width:800px;display:block;margin:0 auto;position:absolute;left:0;top:0;}
- </style>
- </head>
- <body>
- <div class="outer">
- <div id="outer1">
- <img src="1.jpg" alt="" class="img1">
- <div id="in1"></div>
- </div>
- <div id="outer2">
- <div id="in2"><img src="1.jpg" alt="" class="img2"></div>
- </div>
- </div>
- <script type="text/javascript">
- function $(id) {//jquery
- return document.getElementById(id);
- }
- var outer1 = $('outer1');
- var in1 = $ ('in1');
- var in2 = $ ('in2');
- var outer2 =$('outer2');
- var sx,sy;var lenx,leny;
- in1.onmousedown=function (event){
- var event = event || window.event;
- sx=event.clientX;
- sy=event.clientY;
- lenx=sx-in1.offsetLeft//起始鼠標到in1的x方向的距離
- leny=sy-in1.offsetTop//起始鼠標到in1的y方向的距離
- outer2.style.display="block";
- // console.log(lenx,leny,sx,sy,in1.style.left,in1.style.top);
- document.onmousemove=function (event){move(event)};
- document.onmouseup=function (){document.onmousemove=null;}
- }
- function move(event){
- var event = event || window.event;
- var nx,ny;
- nx=event.clientX-lenx;
- ny=event.clientY-leny;
- if(nx>0&&nx<outer1.clientWidth-in1.offsetWidth&&ny>0&&ny<outer1.clientWidth-in1.offsetWidth){
- in1.style.left=nx+"px";
- in1.style.top=ny+"px";
- in2.style.left=-4*nx+"px";
- in2.style.top=-4*ny+"px";
- }
- // console.log(nx,ny,in1.style.left,in1.style.top);
- }
- </script>