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>
View Code

 

布局说明:透明框的大小为图片的1/5，展示框的大小为放大后图片的1/5，展示框大小可变，但宽高按比例约束。

 

posted @ 2015-09-15 20:54  Aboo-阿布  阅读(1024)  评论(0)  编辑  收藏  举报