前面有一章节介绍了使用html+css实现小兔鲜儿网页案例，但是这是一个纯静态网页。最近因为又补充学习了一下前端基础知识WebAPI篇，看到了老师实现的放大镜效果和固定侧边栏效果，因此，突发奇想，直接在小兔鲜儿案例上实现了上述两种功能。
首先，先看下商品详情页面的放大镜效果是什么样子的。由于手上没有太多图片，所以两侧图片只是设置了不同尺寸来展现放大镜效果。图像放大镜的原理是鼠标经过左侧小图片盒子，出现黄色遮盖，然后右侧大图片展示。鼠标移出左侧区域，两个显示出来的区域被隐藏。黄色遮盖会随着鼠标的移动而移动，并且大图片也跟随移动。
图一、商品放大镜效果
前面的使用html+css初步完成小兔鲜儿案例中中给出了静态页面的代码，这里在此基础上写了个简单的商品详情页展示放大镜效果。首先看下新增放大镜效果后项目结构是什么样子的。上面标注颜色的地方为新增详情页放大镜效果的代码。其中animate.js为侧边栏效果代码，下一个博客将进行介绍。
首先在index.html的商品列表展示模块的一个吸尘器图片a标签处添加了跳转页面到详情页功能，代码如下所示：
<a href="./details.html">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>无线吸尘器</h3>
<p><span>¥</span> 899</p>
</a>
商品详情页detail.html如下所示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>商品放大镜效果</title>
8 <script src="./js/detail.js"></script>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14 body {
15 background-color: #fff;
16 font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
17 color: #666
18 }
19 /*清除浮动*/
20 .clearfix:after {
21 visibility: hidden;
22 clear: both;
23 display: block;
24 content: ".";
25 height: 0
26 }
27 .clearfix {
28 *zoom: 1
29 }
30 .mmm {
31 width: 1200px;
32 margin: 0 auto;
33 }
34 .detail-container {
35 margin-top: 20px;
36 margin-left: 20px;
37 }
38 .preview_wrap {
39 width: 400px;
40 height: 590px;
41 }
42 .fl {
43 float: left;
44 }
45 .preview_img {
46 position: relative;
47 height: 398px;
48 border: 1px solid #ccc;
49 }
50 img {
51 display: block;
52 width: 50%;
53 border: 0;
55 margin: 100px auto;
56 }
57 .mask {
58 display: none;
59 position: absolute;
60 top: 0;
61 left: 0;
62 width: 260px;
63 height: 260px;
64 background-color: #efde4f;
65 opacity: 0.5;
66 cursor: move;
67 }
68 .big {
70 position: absolute;
71 left: 410px;
72 top: 0;
73 width: 500px;
74 height: 500px;
76 z-index: 999;
77 border: 1px solid #ccc;
78 overflow: hidden;
79 }
80 .big img {
81 position: absolute;
82 top: 0;
83 left: 0;
84 width: 90%;
85 margin: 10px;
86 }
87 .itemInfo_wrap {
88 width: 518px;
89 }
90 .fr {
91 float: right;
92 }
93 </style>
94 </head>
95 <body>
96 <div class="detail-container mmm">
97 <!-- 展示列表 -->
98 <span>商品详情 ></span> 吸尘器
99 <div class="product_intro clearfix">
100 <!-- 预览区域 -->
101 <div class="preview_wrap fl">
102 <div class="preview_img">
103 <img src="./uploads/new_goods_1.jpg" alt="">
104 <!-- 遮盖层 -->
105 <div class="mask"></div>
106 <div class="big">
107 <img src="./uploads/new_goods_1.jpg" alt="" class="bigImg">
108 </div>
109 </div>
110 </div>
111 <!-- 产品详情区域 -->
112 <div class="itemInfo_wrap fr">
113 哈哈哈哈或或或或，这边没有详情
114 </div>
115 </div>
116 </div>
117 </body>
118 </html>
下面是detail.js代码
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1、当鼠标经过preview_img就显示mask遮挡层和big大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
// 2、当鼠标离开preview_img就隐藏mask遮挡层和big大盒子
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
});
preview_img.addEventListener('mousemove', function(e) {
// 1、先计算鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft; // 鼠标据页面的距离 - 盒子左侧的距离（需要看有没有定位） = 鼠标在盒子内的距离
var y = e.pageY - this.offsetTop;
// console.log(this.offsetLeft);
// 2、减去盒子高度的一半，就是mask的left和top了
// 3、mask移动的距离赋值--鼠标在遮盖层中心位置
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 遮挡层最大移动距离 (因为盒子和遮挡层都是正方形，所以宽高最大距离相同）-- 就是鼠标移动区域盒子（preview_img的宽高）-遮盖层的宽高
var maskMax = this.offsetHeight - mask.offsetHeight;
//4、如果x坐标小于0 ，就让他停在0的位置
if (maskX < 0) {
maskX = 0;
} else if (maskX >= maskMax) { // mask盒子 left最大距离左侧的距离是盒子的宽度-mask的宽度
maskX = maskMax;
}
if (maskY < 0) {
maskY = 0;
} else if (maskY >= maskMax) { // mask盒子 left最大距离左侧的距离是盒子的宽度-mask的宽度
maskY = maskMax
}
mask.style.left = maskX + 'px'; // 将mask中间点位于鼠标位置，则mask的left和top - mask的宽高
mask.style.top = maskY + 'px';
// 放大镜的大图片移动距离 = （遮挡层移动距离（maskX和maskY） * 放大镜大图片最大移动距离）/ 遮挡层最大移动距离（就是移动后，遮挡层不能超过盒子的范围，遮挡层left/top的距离）
var bigImg = document.querySelector('.bigImg');
// 放大镜大图片最大移动距离
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 放大镜的大图片移动距离
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = bigX + 'px';
bigImg.style.top = bigY + 'px';
});
})
这里记录一个小知识点，加深下自己的记忆力
1、mouseover 经过自身盒子和子盒子都会触发鼠标事件
2、mouseenter只会经过自身盒子触发，和mouseleave搭配
3、window.addEvevtListener('load', function(){})，是在页面文档完全加载完毕后执行里面的函数。
好了，到这里商品详情页放大镜效果就实现了。
标签：盒子,进阶,img,--,鲜儿,mask,放大镜,var,left From： https://www.cnblogs.com/gjw0818/p/16928306.html