JS放大镜小功能功能之原理详细解析

类似淘宝看产品图片时放大的效果

先上效果图

1、先看布局

• 大盒子，用来包裹全部的，并且用来作为父级相对定位
• 左边小盒子放小图片
• 左边的白色滑块
• 右边盒子展示放大2倍的图片

  <div id="box">
         <!-- 左侧小图片 -->
        <div class="small_pic"> 
            <!-- 滑块 -->
            <span class="slider"></span>
            <!-- 图片 -->
            <img src="img/1.jpg" alt="">
        </div>
        <!-- 右侧 -->
        <div class="big_pic">
            <!-- 大图片 -->
            <img class='big_img' src="img/1.jpg" alt="" width="720" height="1000">
        </div>
    </div>

样式布局大概就是右边的大图随着滑块移动才出现，右边的图片框超出的要隐藏

#box {
    position: relative;
}
.small_pic {
//是大图片的一半大小
    width: 360px;
    height: 500px;
}
.small_pic img {
    width: 100%;
    height: 100%;
}
.small_pic .slider {
    position: absolute;
    width: 180px;
    height: 250px;
    background: rgba(255,255,255,.3);
    display: none;
    cursor:move;
}
.big_pic {
    width: 360px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 370px;
    border:1px solid #333;
    overflow: hidden;
    display: none;
}
.big_pic .big_img {
    position: absolute;
}

js交互大概就是滑块的移动距离的控制以及大图移动的控制距离

首先是滑块的left和top

这个时候，可以得出滑块的位置定位的left 和 top
var left = event.clientX - slider.offsetWidth/2;
var top = event.clientY - slider.offsetHeight/2;
slider.style.left = left +‘px’;
slider.style.top = top +‘px’;

滑块移动的同时，相当于大图片也移动，因为放大的是2倍（就是左边的小盒子实际上是原图的一半大小），所以大图片跟随移动的距离是滑块的两倍，而且是反方向地移动

big_img.style.left = -(left2) +‘px’; //右侧大图的距离，负号代表反方向
big_img.style.top = -(top2) +‘px’;

这个时候有个问题，会出现这种情况，滑块跑出去

以及这种情况

这个时候我们需要判断下滑块移动的最小（不能是负数）和最大距离（不能超出左边的盒子）
注：滑块的移动距离left是相对于左边的移动距离的（相对的父级大盒子）
所以最小是0，最大是

移动的top也同理，最大值为

var maxLeft = small_pic.offsetWidth - slider.offsetWidth;
var maxTop = small_pic.offsetHeight - slider.offsetHeight;
  //移动范围
            if(left <0) {
                left = 0;
            }else if(left > maxLeft ) {
                left = maxLeft ;
            };
            if(top <0) {
                top = 0;
            }else if(top > maxTop ) {
                top = maxTop ;
            };