一、放大镜原理

狐七 7/4/2017 JavaScriptJqueryExampleHtml2canvas

放大镜在网页中运用广泛，在淘宝京东上面的商品图中就用到了，还有在空间上面展示图片的地方也有用到。现在这种jquery的插件也有很多，但是也要明白其中原理就可以自己做各种各样的放大镜效果了。现在就来好好分析一下放大镜的原理和实现的过程：

# 成果图：

图像 1.png

# 放大镜的原理

使用两个图片：

一个是小图——全部展现在页面中的

一个是大图——局部展示放大的效果

所以由此可以看出突破点，就是网页中一共有两张图，根据他们的移动的距离，可以实现放大镜的效果。

# 网页结构

下面就来写以下网页的结构

<!--css样式-->
<style>
   * {
       margin: 0;
       padding: 0;
   }
   /*放大镜的大盒子*/
   .box {
       width: 350px;
       height: 350px;
       margin: 100px;
       border: 1px solid #ccc;
       position: relative;
   }
   /*大图片外面的盒子*/
   .big {
       width: 400px;
       height: 400px;
       position: absolute;
       top: 0;
       left: 360px;
       border: 1px solid #ccc;
       overflow: hidden;
       display: none;
   }
   /*遮挡层*/
   .mask {
       width: 175px;
       height: 175px;
       background: rgba(255, 255, 0, 0.4);
       position: absolute;
       top: 0px;
       left: 0px;
       cursor: move;
       display: none;
   }
   /*小图片外面的大盒子*/
   .small {
       position: relative;
   }
</style>

<!--html结构-->
<body>
 <!--放大镜的整体-->
 <div class="box" id="box">
     <!--小图的模块-->
     <div class="small">
         <!--小图-->
         ![](images/small.png)
         <!--遮挡层-->
         <div class="mask"></div>
     </div>

     <!--大图的模块-->
     <div class="big">
          <!--大图-->
         ![](images/big.jpg)
     </div>
 </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

如果上面的骨架搭好了，下面就来分析以下放大镜的功能步骤：

鼠标移动的时候遮罩层中的框也跟着一起移动
在遮罩层移动的时候右边的大图也一起移动
遮罩层的移动和大图的移动是相反的，也是按照一定比例进行移动的
遮罩层是不能离开小图的框的

二、放大镜简单实现

狐七的个人博客

Choose mode

一、放大镜原理

一、放大镜原理

# 成果图：

# 放大镜的原理

# 网页结构