案例：仿京东放大镜效果

案例：仿京东放大镜效果

功能需求：

1. 分为三个模块
2. 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功能
3. 黄色的遮挡层跟随着鼠标移动
4. 移动黄色遮挡层，大图片跟随着移动

大图片移动距离=（遮挡层移动距离*大图片最大移动距离）/ 遮挡层最大移动距离

  <style>
      body,
      div {
   
        margin: 0;
        padding: 0;
      }
      .product {
   
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px 0 0 20px;
        border: 1px solid #000;
      }
      .preview_img img {
   
        width: 300px;
        height: 300px;
        margin: 50px 50px;
      }
      .mask {
   
        position: absolute;
        display: none;
        top: 20px;
        left: 30px;
        width: 80px;
        height: 80px;
        background-color: yellow;
        opacity: 0.5;
        cursor: move;
      }
      .big {