Js特效之放大镜（淘宝商品展示）
放大镜具体效果为：一张图片，鼠标移上去出现一个半透明的框，随着鼠标移动，半透明框随着鼠标移动，且鼠标始终处于半透明框的中间，同时在特定区域显示被半透明框覆盖图片部分的放大部分。如下图所示：
分析：要实现如图效果，需要处理两方面的事件。
问题一：要获取鼠标位置，并且鼠标始终处于半透明框的中心位置；且半透明框可以随鼠标移动而移动。
解决一：可以使用
来获取鼠标的位置，并且处理兼容性问题，半透明框绝对定位，可以通过控制left和top值来控制它的移动，可以通过减法来使鼠标位置处于框的中心，并且可以通过最大最小left和top值来控制半透明框不能移除图片。
问题二：如何使下方出现图片并且可以显示不同区域。
解决二：下部设置两个DIV，大的包含在小的里面，设置图片为背景，小的overflow=hidden；通过控制它的scrollLeft和scrollTop值让他滚动。
问题三：如何将半透明框覆盖区域和div展示框显示同步并放大。
解决三：透明框/图片=展示框/放大后图片，并且展示框值得变化等于透明框值变化的N倍。N等于前面比例的倒数。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 #photo{ 12 width: 400px; 13 height: 225px; 14 background: url("images/ico1.jpg") no-repeat; 15 position: relative; 16 } 17 #drag{ 18 width: 80px; 19 height: 45px; 20 background: white; 21 opacity: 0.5; 22 position: absolute; 23 left: 0; 24 top: 0; 25 display: none; 26 } 27 #show{ 28 margin-top: 20px; 29 width: 400px; 30 height: 225px; 31 overflow: hidden; 32 display: none; 33 } 34 #big{ 35 width: 2000px; 36 height: 1125px; 37 background: url("images/ico1.jpg") no-repeat; 38 background-size: 100%; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="photo"> 44 <div id="drag"> 45 </div> 46 </div> 47 <div id="show"> 48 <div id="big"> 49 </div> 50 </div> 51 <script type="text/javascript"> 52 var photo=document.getElementById("photo"); 53 var drag=document.getElementById("drag"); 54 var show=document.getElementById("show"); 55 var big=document.getElementById("big"); 56 window.onmousemove=function(event){ 57 //兼容性处理 58 var e=event||window.event; 59 //为了使鼠标处于透明框的中心部位，需要用鼠标位置减去透明框宽度和高度的一半 60 //x,y分别为经过处理后的鼠标横纵坐标 61 var x= e.clientX-drag.offsetWidth/2; 62 var y= e.clientY-drag.offsetHeight/2; 63 //maxL,maxT分别为最大横向和最大纵向移动距离 64 var maxL=photo.offsetWidth-drag.offsetWidth; 65 var maxT=photo.offsetHeight-drag.offsetHeight; 66 //如果横向坐标超过最大距离，使横向坐标等于最大距离 67 if(x>=maxL){ 68 x=maxL; 69 } 70 //如果横向坐标小于最大距离，使横向坐标等于0 71 if(x<=0){ 72 x=0; 73 } 74 //如果纵向坐标超过最大距离，使纵向坐标等于最大距离 75 if(y>=maxT){ 76 y=maxT; 77 } 78 //如果纵向坐标小于0，使纵向坐标等0 79 if(y<=0){ 80 y=0; 81 } 82 //控制透明框的位置 83 drag.style.left=x+"px"; 84 drag.style.top=y+"px"; 85 //控制展示框显示的位置 86 show.scrollLeft=5*x; 87 show.scrollTop=5*y; 88 } 89 //图片的鼠标移入事件 90 photo.onmouseover=function(){ 91 //透明框和展示框出现 92 show.style.display="block"; 93 drag.style.display="block"; 94 } 95 //图片的鼠标移出事件 96 photo.onmouseout=function(){ 97 //透明框和展示框隐藏 98 show.style.display="none"; 99 drag.style.display="none"; 100 } 101 </script> 102 </body> 103 </html>
布局说明:透明框的大小为图片的1/5，展示框的大小为放大后图片的1/5，展示框大小可变，但宽高按比例约束。
