Js放大镜的实现过程

                                                                             Js放大镜的实现过程

   在大家使用淘宝时，就会看到当鼠标落到商品的某个区域时，就会在其旁边展示出放大这个功能，那么在这里就讲解下放大镜这个功能是怎样实现的呢。

首先在布局上，要设置一个wrapper区，在wrapper区中又要设置两个区域一个是图片放置区另一个是放大后的图片的展示区。在图片放置区中又要有引入图片的区域与鼠标移动时所实现的区域。那么布局就如下所示

接下来就是样式布局上，在这里我们使用的是position来完成整个的定位。首先wrapper区设置相对的定位，其余两个区域的内容就是使用绝对定位。这里图片的引入我们使用css3中的background-image属性来引入，引入的时候注意下路径的问题即可。下面就是对于整个样式的布局代码

在这里需要注意的就是在展示区我们设置的overflow:hidden，因为我们的放大的原理就是将整个图片放大到原来图片的几倍，然后将超出的部分隐藏即可实现这个放大的过程。另外在设置图片区时，绝对定位是放在跟着鼠标移动上的标签上的，因为其脱离了文档流，就可以在图片区域任意的移动。这里设置这个标签的透明度将其背景设置为白色也是为了展示图片的区域，给人一种模糊的感觉。

    接下来就是逻辑实现的过程，在这里我们使用了jquery，用原生的js也可以实现，在可以使用jq的原因是因为其写的代码量将会减少。这里需要引入的jq文件去官网下载即可，也可以使用cdn网络引用它，具体参考下面的网址进行操作https://www.w3school.com.cn/jquery/jquery_install.asp

    那么下面就是整个放大镜的逻辑过程，这里需要的就是鼠标移入到图片区与鼠标移出图片区。想一想在鼠标移入与移出都分别要做什么内容呢？首先鼠标在图片区里面时，要实现右边放大的图片的展示，鼠标移动过程中需要移动的标签跟着它移动并且其标签中的内容就是要展示的区域。当鼠标移出后这些效果就会失效，只剩下图片区。那么在这里我们就写了一个move()方法来表示放大的部分与移动的过程，里面将设置两个参数第一个是e,用于反应出鼠标的位置，后一个就是放大的倍数。下面是代码部分

下面就是对于move()方法的封装，首先就是下面move中的h与w，表示的就是移动方框的长与宽。在这当中需要我们注意一个问题，就是最大与最小边界问题，要使得这个移动方框一直在展示区中。因为方框是根据这个鼠标移动，那么当鼠标在img区中的边界时，这个方框就会有一部分在边界区外面。显然这种情况是不能让其发生的因为方框区中的内容就是所要展示的放大的内容。因此在这里我们就要找到距离上与左边框的最大距离与最小距离。即下面中的max与min。然后就是获取到鼠标的位置，最后将四种超过边界的情况都包含在endL与endT中，最后就是通过样式去改变宽高左右边距等。最后展示区的放大倍数就是先将图片放大到对应的倍数，然后改变margin值完全。