Chinaunix首页 | 论坛 | 博客
  • 博客访问: 47712
  • 博文数量: 34
  • 博客积分: 831
  • 博客等级: 军士长
  • 技术积分: 310
  • 用 户 组: 普通用户
  • 注册时间: 2012-10-08 11:15
文章分类

全部博文(34)

文章存档

2012年(34)

我的朋友

分类: 系统运维

2012-10-08 17:50:57

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

拖拽的原理就是捕捉鼠标的坐标,然后把坐标传给要拖拽的标签A

放大镜的原理就是在拖拽的基础上,把A的窗口在另外一个标签B成倍数的扩大。原理就是先获取鼠标离A的距离x方向d1y方向d2,当鼠标移动到别的位置时候用当前坐标减去d1,d2就可以得到现在divlefttop。只要让BlefttopA的倍数就可以了。

代码:


点击(此处)折叠或打开

  1. <style>
  2.         body,div,img{margin:0;padding:0;border:none;}
  3.         .outer{position:relative;height:800px;width:800px;margin:100px auto;}
  4.         #outer1{height:202px;width:202px;float:left;position:relative;border:1px red solid;}
  5.         .img1{height:200px;width:200px;display:block;margin:0 auto;}
  6.         #in1{height:50px;width:50px;cursor:move;border:1px black solid;position:absolute;left:0;top:0;background:white;opacity:0.5;}
  7.         #outer2{float:left;height:200px;width:200px;border:1px red solid;display:none;overflow:hidden;margin-left:30px;}
  8.         #in2{height:808px;width:808px;border:1px red solid;position:relative;}
  9.         .img2{height:800px;width:800px;display:block;margin:0 auto;position:absolute;left:0;top:0;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="outer">
  14.         <div id="outer1">            
  15.             <img src="1.jpg" alt="" class="img1">
  16.             <div id="in1"></div>
  17.         </div>
  18.         <div id="outer2">            
  19.             <div id="in2"><img src="1.jpg" alt="" class="img2"></div>
  20.         </div>
  21.     </div>
  22.     <script type="text/javascript">
  23.         function $(id) {//jquery
  24.             return document.getElementById(id);
  25.         }
  26.         var outer1 = $('outer1');
  27.         var in1 = $ ('in1');
  28.         var in2 = $ ('in2');
  29.         var outer2 =$('outer2');
  30.         var sx,sy;var lenx,leny;
  31.         in1.onmousedown=function (event){
  32.             var event = event || window.event;
  33.             sx=event.clientX;
  34.             sy=event.clientY;
  35.             lenx=sx-in1.offsetLeft//起始鼠标到in1的x方向的距离
  36.             leny=sy-in1.offsetTop//起始鼠标到in1的y方向的距离
  37.             outer2.style.display="block";
  38.         //    console.log(lenx,leny,sx,sy,in1.style.left,in1.style.top);
  39.             document.onmousemove=function (event){move(event)};
  40.             document.onmouseup=function (){document.onmousemove=null;}
  41.         }
  42.         
  43.         
  44.         function move(event){
  45.             var event = event || window.event;
  46.             var nx,ny;
  47.             nx=event.clientX-lenx;
  48.             ny=event.clientY-leny;
  49.             if(nx>0&&nx<outer1.clientWidth-in1.offsetWidth&&ny>0&&ny<outer1.clientWidth-in1.offsetWidth){
  50.             in1.style.left=nx+"px";
  51.             in1.style.top=ny+"px";
  52.             in2.style.left=-4*nx+"px";
  53.             in2.style.top=-4*ny+"px";
  54.             }
  55.         //    console.log(nx,ny,in1.style.left,in1.style.top);
  56.         }
  57.     </script>
文件代码: 拖拽放大镜.rar  


阅读(441) | 评论(0) | 转发(0) |
0

上一篇:2012-10-08

下一篇:圆周运动

给主人留下些什么吧!~~