用js实现高清放大图片效果

 var box = my$("box");
    var small = box.children[0];
    var big = box.children[1];
    var mask = small.children[1];
    var bigImg = big.children[0];

    //鼠标进入显示遮挡层和大图div
    box.onmouseover = function () {
      mask.style.display = "block";
      big.style.display = "block";
    }
    // 鼠标移开，隐藏遮罩层和大图。
    box.onmouseout = function () {
      mask.style.display = "none";
      big.style.display = "none";
    }
    //在哪个上面移动鼠标，就是谁点onmousemove。鼠标的移动事件
    small.onmousemove = function (e) {
      // 可是区域的宽度减去 mask的宽度的一半，可以让鼠标到中间显示。
      var x = e.clientX - mask.offsetWidth / 2;
      var y = e.clientY - mask.offsetHeight / 2;
      var x = x - 100;//有margin减去
      var y = y - 100;
      // 处理边界，不然mask从图片了里面出去，左上角相当于原点，X坐标Y坐标都是0.
      x = x > 0 ? x : 0;
      y = y > 0 ? y : 0;
      // 图片包含框的宽度减去mask的宽度，就是最大活动宽度范围。
      // 图片包含框的高度减去mask的高度，就是最大的活动高度范围。
      var smallmaxX = small.offsetWidth - mask.offsetWidth;
      var smallmaxY = small.offsetHeight - mask.offsetHeight;
      x = x > smallmaxX ? smallmaxX : x;
      y = y > smallmaxY ? smallmaxY : y;   

      mask.style.left = x + "px";
      mask.style.top = y + "px";

      // 大图的最大横向移动距离,最大纵向移动距离
      var bigmaxX = bigImg.offsetWidth - big.offsetWidth;
      var bigmaxY = bigImg.offsetHeight - big.offsetHeight;

      // 遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离。
      // 大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
      var bigImgMoveX = x * bigmaxX / smallmaxX;
      var bigImgMoveY = y * bigmaxY / smallmaxY;

      // 大图相对于big向左移动，所以是负值。
      bigImg.style.marginLeft = -bigImgMoveX + "px";
      bigImg.style.marginTop = -bigImgMoveY + "px";
    }