javascript--淘宝页面的放大镜效果
放大镜效果需求：
鼠标放入原图中，会出现一个黄色的遮盖层和一个放大的图片，鼠标移动时候，遮盖层会跟着鼠标一起移动，同时放大的图片会跟着一起移动。
实现过程：
1.鼠标移入，遮盖层和大图片显示
2.鼠标离开，遮盖层和大图片隐藏
3.鼠标移动的时候，遮盖层和鼠标对应移动
4.遮盖层移动时候，大图片跟着移动
效果图：
原图 放大镜效果图
实现思路：
一、通过设置display属性，让遮盖层和大图片显示（block）和隐藏（none）。
二、获取鼠标在装有的小图片的盒子中的位置，并将该值赋给遮盖层的style.top和style.left属性，即让遮盖层和鼠标移动中位置相等。
三、注意设置遮盖层不能超过小盒子边框。
四、遮盖层移动，让大盒子中的图片跟着移动，大盒子移动位置需要利用数学方法计算。遮盖层移动距离/遮盖层最大移动距离=大图片移动位置/大图片最大移动距离
注意知识点：
一、样式设置
①装大图片的盒子必须设置长宽，如果不设置，大图片不会显示。
②装大图片盒子必须设置overflow：hidden，如果不设置，大图片位置不会固定，在网页总乱动。
③相对定位和绝对定位设置，遵循子绝父相
二、兼容性设置
①事件对象e的兼容性
②位置坐标的兼容性
③鼠标移入和鼠标移出兼容性
onmouseover \ onmouseout 和 onmouseenter \ onmouseleave，前一组对谷歌浏览器放心使用，但是在ie浏览器中会出现bug，起因是事件冒泡，所以选择后面一组。
上述两组事件在不触发事件冒泡的情况下表现是一样的，但是前一组会触发事件冒泡，后一组不会触发事件冒泡。
代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>淘宝放大镜效果</title>
6
7 <style type="text/css">
8 *{
9 padding: 0px;
10 margin: 0px;
11 }
12
13 .box{
14 margin: 100px;
15 width: 350px;
16 height: 350px;
17 position: relative;
18 border: solid 1px gray;
19 }
20
21 .cover{
22 width: 150px;
23 height: 150px;
24 opacity: 0.3;
25 background-color: yellow;
26 position: absolute;
27 top: 0px;
28 left: 0px;
29 display: none;
30 }
31
32 .big{
33 position: absolute;
34 top: 0px;
35 left: 360px;
36 display: none;
37 overflow: hidden;
38 height: 400px;
39 width: 400px;
40 }
41
42 .big img{
43 position: absolute;
44 }
45 </style>
46 </head>
47 <body>
48 <!-- 一个大盒子，用以控制位置 -->
49 <div id="box" class="box">
50 <!-- 小图片盒子 -->
51 <div class="small">
52 <img src="images/small.jpg" width="350px">
53 <!-- 遮盖层 -->
54 <div class="cover"></div>
55 </div>
56 <!-- 大图片 -->
57 <div class="big">
58 <img src="images/big.jpg" width="600px">
59 </div>
60 </div>
61
62 <script type="text/javascript">
63 // 1.获取需要操作的元素
64 var box=document.getelementbyid('box');
65 var smallbox=box.children[0];
66 var bigbox=box.children[1];
67 var cover=smallbox.children[1];
68 var bigimage=bigbox.children[0];
69 //2.鼠标移动进入小盒子,遮盖层和大图片出现
70 box.onmouseenter=function(){
71 cover.style.display="block";
72 bigbox.style.display="block";
73 }
74 //3.鼠标离开小盒子,遮盖层和大图片隐藏
75 box.onmouseleave=function(){
76 cover.style.display="none";
77 bigbox.style.display="none";
78 }
79
80 //4.鼠标移动,遮盖层跟着移动,并且鼠标点位于遮盖层的中心位置
81 box.onmousemove=function(e){
82 e = e || window.event;
83 //实现思路:鼠标在盒子中的位置=鼠标在文档中位置-盒子位置
84 var mouse_in_documentx=e.pagex || e.clientx + (document.documentelement.scrollleft || document.body.scrollleft);
85 var mouse_in_documenty=e.pagey || e.clienty+(document.documentelement.scrolltop || document.body.scrolltop);
86 //鼠标在盒子中的位置,就是遮盖层的位置
87 var mouse_in_boxx=mouse_in_documentx-box.offsetleft;
88 var mouse_in_boxy=mouse_in_documenty-box.offsettop;
89 //让鼠标位于遮盖层的*
90 var coverx=mouse_in_boxx - cover.offsetwidth/2 ;
91 var covery=mouse_in_boxy - cover.offsetheight/2;
92 //遮盖层不能超过小盒子范围
93 coverx= ( coverx < 0 ) ? 0 : coverx;
94 covery= ( covery < 0 ) ? 0 : covery;
95 coverx=( coverx > ( box.offsetwidth - cover.offsetwidth)) ? ( box.offsetwidth - cover.offsetwidth) : coverx;
96 covery=( covery > ( box.offsetheight - cover.offsetheight)) ? ( box.offsetheight - cover.offsetheight) : covery;
97 cover.style.top=covery + 'px';
98 cover.style.left=coverx + 'px';
99 //当遮盖层移动的时候,大图片跟着遮盖层移动(比例关系换算问题)
100 //公式：遮盖层移动距离/遮盖层最大移动距离=大图片移动距离/大图片最大移动距离
101 //故:大图片移动距离=遮盖层移动距离/遮盖层最大移动距离*大图片最大移动距离
102
103 //遮盖层最大距离
104 var covermax=box.offsetwidth-cover.offsetwidth;
105 //大图片最大移动距离
106 var bigimagemax=bigimage.offsetwidth-bigbox.offsetwidth;
107
108 var bigimagex=coverx*bigimagemax/covermax;
109 var bigimagey=covery*bigimagemax/covermax;
110
111 bigimage.style.top=-bigimagey+'px';
112 bigimage.style.left=-bigimagex+'px';
113 }
114 </script>
115 </body>
116 </html>
下一篇： ai怎么画西红柿? ai绘制番茄的教程