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

我不是女神ヾ 2022-03-07 12:26 508阅读 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 条评论，508人围观）

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

相关阅读

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

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV0

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

相关 javascript 实现图片放大镜功能

淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节下面我们来实现这样一个功能吧，原理很简单：实现一个可以随鼠标移动的虚框在另外一个块中对应显示虚框中

红太狼/ 2023年06月04日 04:59/ 0 赞/ 19 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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