放大镜案例

放大镜

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品放大镜</title>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .product-intro {
      position: relative;
      width: 450px;
      margin: 100px 0 0 200px;
      border: 1px solid #ccc;
    }

    .preview {
      position: relative;
    }

    .enlargement {
      display: none;
      overflow: hidden;
      position: absolute;
      top: -1px;
      left: 450px;
      width: 540px;
      height: 540px;
      border: 1px solid #ccc;
    }

    .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 60%;
      background-color: rgba(228, 228, 11, 0.3);
      border: 1px solid rgba(122, 122, 122, .4);
      cursor: move;
    }

    .active {
      display: block;
    }
  </style>
</head>

<body>
    <!-- 这里推荐用两张大小不用的图片，也不是只用高清图然后缩小，因为在商品总览列表中，会用到小图，图片越小加载的速度就快，能用小图就用小图 -->
  <div class="product-intro">
    <div class="preview">
      <img src="images/m30.jpg" width="450" height="450" alt="m30">
      <div class="mask"></div>
    </div>
    <div class="enlargement">
      <img src="images/m30-big.jpg" alt="m30">
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>
    var oPreview = $('.preview');
    var oMask = $('.mask');
    var oEnlarge = $('.enlargement');
    var oEnlargeImg = $('.enlargement>img');

    var mouseEventMap = {
      mouseenter: function (e) {
        oMask.classList.add('active');
        oEnlarge.classList.add('active');
      },
      mouseleave: function (e) {
        oMask.classList.remove('active');
        oEnlarge.classList.remove('active');
      },
      mousemove: function (e) {
        var x = e.clientX - oMask.offsetWidth / 2 - getPosition(oPreview).left;
        var y = e.clientY - oMask.offsetHeight / 2 - getPosition(oPreview).top;

        x = Math.min(x, oPreview.offsetWidth - oMask.offsetWidth);
        x = Math.max(x, 0);

        y = Math.min(y, oPreview.offsetHeight - oMask.offsetHeight);
        y = Math.max(y, 0);

        oMask.style.left = x + 'px';
        oMask.style.top = y + 'px';

        // 展示比例   (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)

        var moveX = (oEnlargeImg.offsetWidth - oEnlarge.offsetWidth) / (oPreview.offsetWidth - oMask.offsetWidth);
        var moveY = (oEnlargeImg.offsetHeight - oEnlarge.offsetHeight) / (oPreview.offsetHeight - oMask.offsetHeight);

        oEnlargeImg.style.marginLeft = -x * moveX + 'px';
        oEnlargeImg.style.marginTop = -y * moveX + 'px';
      }
    }

    oPreview.addEventListener('mouseenter', handle, false);
    oPreview.addEventListener('mouseleave', handle, false);
    oPreview.addEventListener('mousemove', handle, false);

    function handle(e) {
      if (mouseEventMap[e.type] && typeof mouseEventMap[e.type] === 'function') {
        mouseEventMap[e.type](e);
      }
    }

  </script>
</body>

</html>