用JS写的放大镜

代码如下

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <title></title>
  7     <link rel="stylesheet" href="">
  8     <script type="text/javascript" src="js/common.js"></script>
  9     <style type="text/css">
 10         body,div,img{padding:0;margin:0;}
 11         #main{
 12             margin:50px;
 13             position:relative;
 14 
 15         }
 16         #small{
 17             width:300px;
 18             height:187px;
 19             border:1px solid red;
 20 
 21         }
 22 
 23         #small img{
 24             width:300px;
 25             height:187px;
 26         }
 27         #small #mark{
 28             width:50px;
 29             height:50px;
 30             background-color: #ccc;
 31             opacity:0.5;
 32             position:absolute;
 33             top:0px;
 34             left:0px;
 35             display:none;
 36         }
 37         #big{
 38             width:300px;
 39             height:187px;
 40             border:1px solid red;
 41             position:absolute;
 42             top:0px;
 43             left:320px;
 44             overflow:hidden;
 45             display:none;
 46         }
 47         /*图片想要移动必须绝对定位*/
 48         #big img {
 49             position:absolute;
 50         }
 51     </style>
 52     <script type="text/javascript">
 53         window.onload = function(){
 54             var oSmall = $('small');
 55             var oBig = $('big');
 56             var oMark = $('mark');
 57             var bigImg = oBig.getElementsByTagName('img')[0];
 58 
 59             oSmall.onmouseover = function(){
 60                 oMark.style.display = 'block';
 61                 oBig.style.display = 'block';
 62             }
 63 
 64             oSmall.onmouseout = function(){
 65                 oMark.style.display = 'none';
 66                 oBig.style.display = 'none';
 67             }
 68 
 69             oSmall.onmousemove = function(e){
 70                 var ev = e || window.event;
 71 
 72                 //鼠标在small小图里面的距离
 73                 var x = ev.clientX - oSmall.parentNode.offsetLeft;
 74                 var y = ev.clientY - oSmall.parentNode.offsetTop;
 75 
 76                 //确定镜头的坐标
 77                 var markLeft = x - (mark.offsetWidth/2);
 78                 var markTop = y - (mark.offsetHeight/2);
 79 
 80 
 81                 //控制镜头边界
 82                 //如果距离左边小于0,就重新赋值为0 
 83                 if (markLeft < 0) {
 84                     markLeft = 0;
 85                 }
 86                 //如果距离顶部小于0,就重新赋值为0
 87                 if (markTop < 0) {
 88                     markTop = 0;
 89                 }
 90                 //如果镜头的右边移动的距离加上本身的宽度大于small小图的宽度，说明右边过界了
 91                 if (markLeft+oMark.offsetWidth > oSmall.offsetWidth) {
 92                     markLeft = oSmall.offsetWidth - oMark.offsetWidth;
 93                 }
 94 
 95                 //如果镜头的下面移动的距离加上本身的高度大于small小图的高度，说明底部过界了        
 96                 if (markTop+oMark.offsetHeight > oSmall.offsetHeight) {
 97                     markTop = oSmall.offsetHeight - oMark.offsetHeight;
 98                 }
 99                 //设置镜头的位置
100                 oMark.style.left = markLeft + 'px';
101                 oMark.style.top = markTop + 'px';
102 
103                 //计算大图移动的比例算法
104                 //markLeft/(oSmall.offsetWidth-oMark.offsetWidth) ==
105                 //bigLeft/(bigImg.offsetWidth-big.offsetWidth)
106                 //
107                 var bigLeft = markLeft/(oSmall.offsetWidth-oMark.offsetWidth) * (bigImg.offsetWidth-big.offsetWidth);
108                 var bigTop = markTop/(oSmall.offsetHeight-oMark.offsetHeight) * (bigImg.offsetHeight-big.offsetHeight);
109                 
110                 bigImg.style.left = -bigLeft + 'px';
111                 bigImg.style.top = -bigTop + 'px';
112             }
113         }
114     </script>
115 </head>
116 <body>
117     <div id="main">
118         <div id="small">
119             <img src="img/ktm_small.jpg" alt="">
120             <div id="mark"></div>
121         </div>
122         <div id="big">
123             <img src="img/ktm_big.jpg" alt="">
124         </div>
125     </div>
126 </body>
127 </html>

 

posted @ 2016-09-25 22:29  小码农薛尧  阅读(706)  评论(0)  编辑  收藏  举报
薛尧的博客