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

我不是女神ヾ 2022-03-07 12:26 477阅读 0赞

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

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

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.csdn.net/download/bowei026/11026570][https_download.csdn.net_download_bowei026_11026570]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220307/d4b7b695367f470aaf3bf7e964a38064.png
[https_download.csdn.net_download_bowei026_11026570]: https://download.csdn.net/download/bowei026/11026570

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关 005：Mapbox GL添加全屏显示功能

![在这里插入图片描述][bf6d528f641048c2924d88e7dc1e25f4.png_pic_center] 第005个 [点击查看专栏目录][Link 1]

左手的ㄟ右手/ 2024年03月23日 11:37/ 0 赞/ 99 阅读

相关 Vue 点击图片放大显示功能

1 方式一：列表中感应鼠标显示大图 ![在这里插入图片描述][ea4b3a1f831349cea22500b85547d702.png] 我管理后台使用的是 elem

红太狼/ 2023年10月08日 22:49/ 0 赞/ 65 阅读

相关 js点击成全屏，再点击或者ESC退出全屏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

雨点打透心脏的1/2处/ 2023年06月28日 08:42/ 0 赞/ 22 阅读

相关 vue实现点击图片放大显示功能

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq3488

ゝ一纸荒年。/ 2022年11月17日 13:53/ 0 赞/ 347 阅读

相关 jQuery点击图片全屏放大插件

[下载地址][Link 1]这是个灯箱LightBox插件，点击图片弹出覆盖全屏层图片放大显示效果。基于jquery.magnific-popup.js这个插件实现的弹出放大效

港控/mmm°/ 2022年09月11日 06:17/ 0 赞/ 334 阅读

相关 Android浏览图片，点击放大至全屏效果

最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。 ![201405102301501

￡神魔★判官ぃ/ 2022年05月13日 03:04/ 0 赞/ 481 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 440 阅读

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

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

我不是女神ヾ/ 2022年03月07日 12:26/ 0 赞/ 478 阅读

相关 js点击按钮实现全屏效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

旧城等待，/ 2022年01月19日 03:34/ 0 赞/ 710 阅读

相关 JavaScript点击进入全屏和退出全屏

目录效果图核心代码完整案例效果图 ![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

向右看齐/ 2021年09月22日 01:01/ 0 赞/ 527 阅读