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 width: 350px;
16 height: 350px;
17 /*background-color: red;*/
18 margin: 100px 0 0 100px;
19 position: relative;
20 }
21
22 #small_box {
23 width: 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 width: 100%;
33 height: 100%;
34 }
35
36 #mask {
37 width: 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 width: 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>
