实现给图片添加放大镜，点击后全屏显示的功能

有时候页面显示的图片看不清，希望点击后放大查看，只是实现这样的一个功能比较简单，但是如果要将所有的图片统一加上点击放大的功能，就有点难度。

本文给出一个解决该问题的例子，实现鼠标移动到图片上时鼠标自动变为带加号的放大镜，点击后可以将图片放大成全屏显示，手机上也兼容。

效果：

image-zoom.js

(function() {

  // 文档图片放大查看
  imgZoom();

  function imgZoom() {
    var zoomDefaults = {
      styles: {
        zoomImage: {
          cursor          : 'zoom-out',
          position        : 'absolute',
          transition      : 'transform 300ms',
          transform       : 'translate3d(0, 0, 0) scale(1)',
          transformOrigin : 'center center',
          willChange      : 'transform, top, left'
        },
        zoomContainer: {
          position        : 'fixed',
          top             : 0,
          right           : 0,
          bottom          : 0,
          left            : 0,
          zIndex          : 1024,
        },
        overlay: {
          position        : 'absolute',
          top             : 0,
          right           : 0,
          bottom          : 0,
          left            : 0,
          backgroundColor : '#FFF',
          opacity         : 0,
          transition      : 'opacity 300ms',
        },
        btn: {
          position        : 'absolute',
          bottom          : 12,
          right           : 12,
          padding         : '4px 10px',
          border          : '1px solid #e9e9e9',
          borderRadius    : 2,
          fontSize        : 12,
          color           : '#999',
        },
        btnHover: {
          color           : '#666',
        },
      },
    };
    var zoomOriginImage = null;
    var zoomTimer = null;
    // zoom in
    $('.markdown').on('click', 'img', function() {
      zoomOriginImage = $(this).get(0);

      var $wrap = $('<div />');
      $wrap.css(zoomDefaults.styles.zoomContainer);

      var $overlay = $('<div class="overlay" />');
      $overlay.css(zoomDefaults.styles.overlay);

      var $img = $(this).clone();
      $img.css(getImageStyle(zoomOriginImage, false));

      var $btn = $('<a target="_blank" />');
      $btn.attr('href', $img.attr('src')).text('查看原图');
      $btn.css(zoomDefaults.styles.btn);

      $btn.hover(function() {
        $(this).css(zoomDefaults.styles.btnHover);
      }, function() {
        $(this).css(zoomDefaults.styles.btn);
      });

      $wrap.append($overlay).append($img).append($btn);
      $('#zoom-img').append($wrap);

      // transition
      $overlay.css({
        opacity: 1,
      });
      $img.css(getImageStyle($img.get(0), true));
    });

    // zoom out
    $('#zoom-img').on('click', function() {
      var $zoom = $(this);
      $zoom.find('img').css(getImageStyle(zoomOriginImage, false));
      $zoom.find('.overlay').css({
        opacity: 0
      });

      if (zoomTimer) {
        clearTimeout(zoomTimer);
      }
      zoomTimer = setTimeout(function() {
        $zoom.html('');
        zoomOriginImage = null;
      }, 150);
    });

    $(window).on('scroll', function() {
      $('#zoom-img').html('');
      zoomOriginImage = null;
    });

    $(window).on('resize', function() {
      if ($('#zoom-img img').length) {
        $('#zoom-img img').css(getImageStyle(zoomOriginImage, true));
      }
    });

    function getImageStyle(image, isZoom) {
      var imageOffset = image.getBoundingClientRect();
      var top = imageOffset.top;
      var left = imageOffset.left;
      var width = image.width;
      var height = image.height;

      var style = {
        top: top,
        left: left,
        width: width,
        height: height
      };

      if (!isZoom) {
        return Object.assign({}, zoomDefaults.styles.zoomImage, style);
      }

      // Get the the coords for center of the viewport
      var viewportX = window.innerWidth / 2;
      var viewportY = window.innerHeight / 2;

      // Get the coords for center of the original image
      var imageCenterX = imageOffset.left + image.width / 2;
      var imageCenterY = imageOffset.top + image.height / 2;

      // Get offset amounts for image coords to be centered on screen
      var translateX = viewportX - imageCenterX;
      var translateY = viewportY - imageCenterY;

      // Figure out how much to scale the image so it doesn't overflow the screen
      var scale = getScale(width, height);

      var zoomStyle = {
        transform: 'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) scale(' + scale + ')',
      }

      return Object.assign({}, zoomDefaults.styles.zoomImage, style, zoomStyle);
    }

    function getScale(width, height) {
      var totalMargin = 40;
      var scaleX = window.innerWidth / (width + totalMargin);
      var scaleY = window.innerHeight / (height + totalMargin);
      return Math.min(scaleX, scaleY);
    }
  }

}());

image.css

.markdown img {
  display: block;
  max-width: 100%;
  /* height: auto;*/
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="image.css" type="text/css" />
<script src="jquery.min.js"></script>
</head>
<body>

<div class="markdown">
    <span>应用创建及使用流程：</span>
	<span><img src="http://img01.taobaocdn.com/top/i1/LB1CAhCSVXXXXa3XpXXXXXXXXXX" height="180"></span>
</div>

<div class="markdown">
    <span>名片识别：</span>
	<span><img src="20170707105813603.jpg" height="180"></span>
</div>

<div id="zoom-img"></div>
<script src="image-zoom.js"></script>

</body>
</html>

至此，代码全部结束，可下载 https://download.youkuaiyun.com/download/bowei026/11026570