Jq实现放大镜效果

HTML

  <div class="wrapper">
    <div class="imgbox">
      <img src="http://www.jq22.com/demo/jpgZoo20160421/images/img01.jpg">
      <div class="hoverbox"></div>
    </div>
    <div class="showbox">
      <img src="http://www.jq22.com/demo/jpgZoo20160421/images/img01.jpg">
    </div>
  </div>

CSS

  <style>
    .wrapper {
      position: relative;
      margin-left: 100px;
    }

    .imgbox {
      width: 300px;
      height: 300px;
      border: 1px solid #000;
    }

    .imgbox img {
      width: 300px;
      height: 300px;
      vertical-align: top;
    }

    .showbox {
      display: none;
      position: absolute;
      left: 400px;
      top: 0;
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      overflow: hidden;
    }
    .showbox img {
      position: absolute;
      width: 1200px;
    }
    .hoverbox {
      display: none;
      position: absolute;
      top: 0;
      width: 100px;
      height: 75px;
      border: 1px solid #09f;
      cursor: move;
      z-index: 10;
      background: #09f;
    }
  </style>

JS

  <script>
    function Zoomhover(img, hoverbox, showImg) {
      var imgleft = img.offset().left;
      var imgtop = img.offset().top;
      var hoverWidth = hoverbox.width();
      var hoverHeight = hoverbox.height();
      $(".imgbox > img, .hoverbox").mouseover(function (e) {
        var x = e.pageX;
        var y = e.pageY;
        $(".hoverbox, .showbox").show();
        hoverbox.css("opacity", "0.3");
        Zoom(img, hoverbox, showImg, imgleft, imgtop, x, y, hoverWidth, hoverHeight);
      }).mousemove(function (e) {
        var x = e.pageX;
        var y = e.pageY;
        Zoom(img, hoverbox, showImg, imgleft, imgtop, x, y, hoverWidth, hoverHeight);
      }).mouseout(function (e) {
        showImg.parent().hide();
        hoverbox.hide();
      });
    }


    function Zoom(img, hoverbox, showImg, imgleft, imgtop, x, y, hoverWidth, hoverHeight) {
      var moveX = x - imgleft - (hoverWidth / 2);
      var moveY = y - imgtop - (hoverHeight / 2);

      moveX = moveX < 0 ? 0 : moveX;
      moveX = moveX > img.width() - hoverWidth ? img.width() - hoverWidth : moveX;
      moveY = moveY < 0 ? 0 : moveY;
      moveY = moveY > img.height() - hoverHeight ? img.height() - hoverHeight : moveY;

      // 设置显示比例
      var proportionX = showImg.width() / img.width();
      var proportionY = showImg.height() / img.height();
      showImg.css({
        left: -(moveX * proportionX),
        top: -(moveY * proportionY)
      });
      hoverbox.css({
        left: moveX,
        top: moveY
      });
    }
    $(function () {
      Zoomhover($(".imgbox img"), $(".hoverbox"), $(".showbox img"));
    });
  </script>