JavaScript模拟淘宝商品放大镜效果

思路：

　　 让放大镜在图片框中动起来

　　右侧的图放大相应的倍数

用到的知识点：

　　onmousemove事件

　　clientX、clientY、

　　offsetLeft、offsetTop、

　　offsetWidth、offsetHeight、

 遇到的问题：

　　在offset、client运算的过程中没有加单位，写magnifier.style.left = x；的时候没有效果，改成了magnifier.style.left = x + 'px';

 总结：

　　计算放大倍数的时候右侧的放大倍数需要和左侧的原图的比列一致！

　　

 

代码如下：

  1 <!doctype html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8         <title></title>
  9         <style>
 10             #box {
 11                 width: 600px;
 12                 height: 400px;
 13                 position: relative;
 14                 border: 20px solid #ccc;
 15             }
 16             
 17             #box img {
 18                 width: 100%;
 19                 height: 100%;
 20                 display: block;
 21             }
 22             
 23             #magnifier {
 24                 width: 80px;
 25                 height: 80px;
 26                 position: absolute;
 27                 left: 0;
 28                 top: 0;
 29                 background-color: rgba(255, 255, 255, .4);
 30             }
 31             
 32             #magnifier-3x {
 33                 width: 240px;
 34                 height: 240px;
 35                 border: 1px solid #ccc;
 36                 position: absolute;
 37                 right: -280px;
 38                 top: 0px;
 39                 overflow: hidden;
 40             }
 41             
 42             #magnifier-3x img {
 43                 width: 1800px;
 44                 height: 1200px;
 45             }
 46         </style>
 47     </head>
 48 
 49     <body>
 50 
 51         <div id="box">
 52             <img width="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511706486690&di=708c68393c1d4ea2f34b38f8fe7158a9&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201508%2F19%2F20150819162913_ZEcLa.thumb.700_0.jpeg" alt="">
 53             <div id="magnifier"></div>
 54             <div id="magnifier-3x">
 55                 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511706486690&di=708c68393c1d4ea2f34b38f8fe7158a9&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201508%2F19%2F20150819162913_ZEcLa.thumb.700_0.jpeg" alt="">
 56             </div>
 57         </div>
 58 
 59         <script>
 60             //让放大镜在图片框中动起来
 66 
 67             var magnifier = document.querySelector('#magnifier');
 68             var box = document.querySelector('#box');
 69             var img = document.querySelector('#magnifier-3x img');
 70 
 71             box.onmousemove = function(ev) {
 72 
 73                 var ev = ev || event;
 74 
 75                 //获取鼠标所在的位置
 76                 var x = ev.clientX - box.offsetLeft - box.clientLeft - magnifier.offsetWidth / 2;
 77                 var y = ev.clientY - box.offsetTop - box.clientTop - magnifier.offsetHeight / 2;
 78 
 79                 //边界处理
 80                 if(x < 0) {
 81                     x = 0;
 82                 }
 83                 if(x > box.clientWidth - magnifier.offsetWidth) {
 84                     x = box.clientWidth - magnifier.offsetWidth;
 85                 }
 86 
 87                 if(y < 0) {
 88                     y = 0;
 89                 }
 90                 if(y > box.clientHeight - magnifier.offsetHeight) {
 91                     y = box.clientHeight - magnifier.offsetHeight;
 92                 }
 93 
 94                 magnifier.style.left = x + 'px';
 95                 magnifier.style.top = y + 'px';
 96 
 97                 //移动被放大的图片 以便显示出对应的位置
 98                 var l = img.offsetWidth * (x / box.clientWidth);
 99                 var t = img.offsetHeight * (y / box.clientHeight);
100 
101                 img.style.marginLeft = -l + 'px';
102                 img.style.marginTop = -t + 'px';
103 
104             };
105         </script>
106 
107     </body>
108 
109 </html>

 

posted @ 2017-11-26 20:30  zhangtiantian  阅读(96)  评论(0)    收藏  举报