欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript--淘宝页面的放大镜效果

程序员文章站 2022-04-13 15:47:35
放大镜效果需求: 鼠标放入原图中,会出现一个黄色的遮盖层和一个放大的图片,鼠标移动时候,遮盖层会跟着鼠标一起移动,同时放大的图片会跟着一起移动。 实现过程: 1.鼠标移入,遮盖层和大图片显示 2.鼠标离开,遮盖层和大图片隐藏 3.鼠标移动的时候,遮盖层和鼠标对应移动 4.遮盖层移动时候,大图片跟着移 ......

放大镜效果需求:

鼠标放入原图中,会出现一个黄色的遮盖层和一个放大的图片,鼠标移动时候,遮盖层会跟着鼠标一起移动,同时放大的图片会跟着一起移动。

 

实现过程:

1.鼠标移入,遮盖层和大图片显示

2.鼠标离开,遮盖层和大图片隐藏

3.鼠标移动的时候,遮盖层和鼠标对应移动

4.遮盖层移动时候,大图片跟着移动

 

效果图:

                                   原图                                                    放大镜效果图

 javascript--淘宝页面的放大镜效果                                                            javascript--淘宝页面的放大镜效果

实现思路:

一、通过设置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>