js放大镜的案例

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11             border: none;
 12         }
 13 
 14         #box {
 15              350px;
 16             height: 350px;
 17             /*background-color: red;*/
 18             margin: 100px 0 0 100px;
 19             position: relative;
 20         }
 21 
 22         #small_box {
 23              100%;
 24             height: 100%;
 25             border: 1px solid #cccccc;
 26             box-sizing: border-box;
 27 
 28             position: relative;
 29         }
 30 
 31         #small_box img {
 32              100%;
 33             height: 100%;
 34         }
 35 
 36         #mask {
 37              100px;
 38             height: 100px;
 39             background-color: rgba(255, 255, 0, .4);
 40             position: absolute;
 41             left: 0;
 42             top: 0;
 43             cursor: move;
 44             /*隐藏*/
 45             display: none;
 46         }
 47 
 48         #big_box {
 49              600px;
 50             height: 600px;
 51             border: 1px solid #CCCCCC;
 52             /*定位*/
 53             position: absolute;
 54             left: 360px;
 55             top: 0;
 56 
 57             overflow: hidden;
 58             display: none;
 59         }
 60 
 61         #big_box img{
 62             position: absolute;
 63             left: 0;
 64             top: 0;
 65         }
 66 
 67         #list {
 68             margin: 20px 0 0 100px;
 69         }
 70 
 71         #list ul li {
 72             float: left;
 73             margin: 5px;
 74             cursor: pointer;
 75         }
 76     </style>
 77 </head>
 78 <body>
 79 <div id="box">
 80     <div id="small_box">
 81         <img src="images/pic001.jpg" alt="">
 82         <span id="mask"></span>
 83     </div>
 84     <div id="big_box">
 85         <img src="images/pic01.jpg" alt="">
 86     </div>
 87 </div>
 88 <div id="list">
 89     <ul>
 90         <li><img src="images/pic0001.jpg" alt=""></li>
 91         <li><img src="images/pic0002.jpg" alt=""></li>
 92         <li><img src="images/pic0003.jpg" alt=""></li>
 93         <li><img src="images/pic0004.jpg" alt=""></li>
 94     </ul>
 95 </div>
 96 
 97 <script>
 98     window.addEventListener('load', function (ev) {
 99         // 1. 获取标签
100         var box = document.getElementById('box');
101         var s_box = box.children[0];
102         var b_box = box.children[1];
103         var mask = s_box.children[1];
104         var b_img = b_box.children[0];
105         var list_lis = document.getElementById('list').getElementsByTagName('li');
106 
107         // 2. 监听鼠标进入小盒子
108         s_box.addEventListener('mouseover', function (evt) {
109             // 2.1 显示隐藏内容
110             mask.style.display = 'block';
111             b_box.style.display = 'block';
112 
113             // 2.2 监听鼠标的移动
114             s_box.addEventListener('mousemove', function (evt1) {
115                 var e = evt1 || window.event;
116 
117                 // 2.3 求出鼠标的坐标 让鼠标在盒子中间
118                 var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;
119                 var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;
120                 console.log(pointX)
121 
122                 // 2.4 边界检测
123                 if (pointX < 0) {
124                     pointX = 0
125                 } else if (pointX > s_box.offsetWidth - mask.offsetWidth - 2) {
126                     pointX = s_box.offsetWidth - mask.offsetWidth - 2
127                 }
128 
129                 if (pointY < 0) {
130                     pointY = 0
131                 } else if (pointY > s_box.offsetHeight - mask.offsetHeight - 2) {
132                     pointY = s_box.offsetHeight - mask.offsetHeight - 2
133                 }
134 
135 
136                 // 2.5 让放大镜走起来
137                 mask.style.left = pointX + 'px';
138                 mask.style.top = pointY + 'px';
139 
140                 // 2.6 让大盒子中的图片走起来
141                 /*
142                    smallX / bigX = sBox.width / 大盒子的宽度
143                    bigX = smallX /  (sBox.width / 大盒子的宽度)
144                 */
145                 b_img.style.left = -pointX / (s_box.offsetWidth / b_box.offsetWidth) + 'px';
146                 b_img.style.top = -pointY / (s_box.offsetHeight / b_box.offsetHeight) + 'px';
147             });
148         });
149 
150         // 3. 监听鼠标离开小盒子
151         s_box.addEventListener('mouseout', function (evt) {
152             // 2.1 显示隐藏内容
153             mask.style.display = 'none';
154             b_box.style.display = 'none';
155         });
156 
157         // 4. 遍历列表的图片
158         for (var i = 0; i < list_lis.length; i++) {
159             (function (i) {
160                 var li = list_lis[i];
161                 li.addEventListener('mouseover', function (ev1) {
162                     s_box.children[0].src = 'images/pic00'+ (i+1) +'.jpg';
163                     b_img.src = 'images/pic0'+ (i+1) +'.jpg';
164                 });
165             })(i)
166         }
167     })
168 </script>
169 </body>
170 </html>