JQ实现一个放大镜效果

当我们浏览购物网站某个商品的详情页的时候，都会有一个鼠标移入到商品上时放大的效果，那么今天我们就用jq来实现一个放大镜的效果，先上一个效果图让大家看一下（下图是我仿照一加官网写的一个商品详情页）：

1. 首先我们写放大镜要明白是怎样的一个思路去实现这个效果；先分析，既然是放大镜，那么可以肯定的是要按照一个合适的比例去放大对应的相对的图片，同时放大镜部分和被放大图片的移动距离都要等比例的放大，基本原理就这些了，然后下面我们再把细节完善一下。
2. 首先我们需要创建几个变量用于设定图片的位置、移动距离等，在这我们就设定为全局变量了，因为后续用到的比较多；

 $(function () {
   
            var mouseX = 0; //鼠标移动的位置X
            var mouseY = 0; //鼠标移动的位置Y
            var maxLeft = 0; //最右边
            var maxTop = 0; //最下边
            var markLeft = 0; //放大镜移动的左部距离
            var markTop = 0; //放大镜移动的顶部距离
            var perX = 0; //移动的X百分比
            var perY = 0; //移动的Y百分比
            var bigLeft = 0; //大图要移动left的距离
            var bigTop = 0; //大图要移动top的距离

3. 创建完成后我们要添加鼠标移入移出事件（此时要注意移出要是用mouseleave，阻止冒泡，这是一个小细节），然后改变放大镜的位置，同时要让选定区域的小框只能在原图上移动；

 function updataMark($mark) {
   
         //让小框只能在小图中移动
         if (markLeft < 0){
   
             markLeft = 0;
          }else if (markLeft > markLeft){
   
              markLeft = markLeft;
          } 
            if (markTop < 0){
   
              markTop = 0;
          } else if