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>