经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
基于JS实现点击图片在弹出层显示大图效果
来源：jb51　　时间：2022/8/1 11:08:53　　对本文有异议

Javascript是个好东西。

Jquery是基于这个好东西的一个强大的库。

今天要实现的功能是基于这两个玩意儿的。

点击图片，在弹出层显示原图。

大概效果是这样的：

上代码：

先是html部分：

  1. <div style="text-align:center;margin-top:200px;">
  2.                    <img src="https://guanchao.site/uploads/atricle/5db3a72e49efd.jpeg" alt="" style="width:100px;" id="plus">
  3.          </div>
  4.  
  5.                    <!-- 弹窗部分代码 -->
  6.          <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
  7.              <div id="innerdiv" style="position:absolute;">
  8.                  <img id="bigimg" style="border:5px solid #fff;" src="" />
  9.              </div>
  10.          </div>
  11.          <!-- 弹窗部分代码 -->

Js部分：

  1. $(function(){ 
  2.         $("#plus").click(function(){
  3.             var _this = $(this);//将当前的pimg元素作为_this传入函数 
  4.             imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); 
  5.         }); 
  6.     }); 
  7.  
  8.     function imgShow(outerdiv, innerdiv, bigimg, _this){ 
  9.         var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
  10.         $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
  11.      
  12.             /*获取当前点击图片的真实大小，并显示弹出层及大图*/ 
  13.         $("<img/>").attr("src", src).load(function(){ 
  14.             var windowW = $(window).width();//获取当前窗口宽度 
  15.             var windowH = $(window).height();//获取当前窗口高度 
  16.             var realWidth = this.width;//获取图片真实宽度 
  17.             var realHeight = this.height;//获取图片真实高度 
  18.             var imgWidth, imgHeight; 
  19.             var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
  20.              
  21.             if(realHeight>windowH*scale) {//判断图片高度 
  22.                 imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放 
  23.                 imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 
  24.                 if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 
  25.                     imgWidth = windowW*scale;//再对宽度进行缩放 
  26.                 } 
  27.             } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度 
  28.                 imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放 
  29.                             imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 
  30.             } else {//如果图片真实高度和宽度都符合要求，高宽不变 
  31.                 imgWidth = realWidth; 
  32.                 imgHeight = realHeight; 
  33.             } 
  34.                     $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 
  35.              
  36.             var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 
  37.             var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 
  38.             $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 
  39.             $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
  40.         }); 
  41.          
  42.         $(outerdiv).click(function(){//再次点击淡出消失弹出层 
  43.             $(this).fadeOut("fast"); 
  44.         }); 
  45.     }

20220617补充：

PC端的图片放大使用上边的代码即可，但是在移动端的时候我们就需要用到两指放大缩小功能，然后还要加上单指移动的功能，

基础代码还是与上边一样，我就不废话了，直接上完整的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.0/jquery.min.js"
  9.         type="application/javascript"></script>
  10. </head>
  11. <body>
  12.     <div style="text-align:center;margin-top:200px;">
  13.         <img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;" class="plus">
  14.     </div>
  15.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  16.     
  17.     <div style="text-align:center;margin-top:200px;">
  18.         <img src="https://resource.guanchao.site/uploads/atricle/5db513ccbe77f.png" alt="" style="width:100px;"
  19.             class="plus">
  20.     </div>
  21.     <!-- 弹窗部分代码 -->
  22.     <div id="outerdiv"
  23.         style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
  24.         <div id="innerdiv" style="position:absolute;">
  25.             <img id="bigimg" style="border:5px solid #fff;" src="" />
  26.         </div>
  27.     </div>
  28.     <!-- 弹窗部分代码 -->
  29. </body>
  30. </html>
  31. <script src="https://dev.mools.net/lims/web/common/js/vconsole.min.js"></script>
  32. <script>
  33.     // 初始化
  34.     var vConsole = new VConsole();
  35.     $(function () {
  36.         $(".plus").click(
  37.             function () {
  38.                 var _this = $(this);//将当前的pimg元素作为_this传入函数 
  39.                 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
  40.                 //移动端手指移动事件,如果不需要移动端手指事件,这一部分内容可以不加,只要上面两行代码以及imgShow()事件
  41.                 var eleImg = document.querySelector('#innerdiv');
  42.                 var store = {
  43.                     scale: 1
  44.                 };
  45.                 //定义移动端的初始位置
  46.                 var position_top, position_left, pageX, pageY;
  47.                 // 缩放事件的处理
  48.                 //事件开始
  49.                 eleImg.addEventListener('touchstart', function (event) {
  50.                     event.preventDefault();//阻止默认事件，防止底部内容滚动
  51.                     //在触屏设备下，要判断是单指还是多指操作，可以通过event.touches数组对象的长度判断。
  52.                     var touches = event.touches;
  53.                     var events = touches[0];//单指
  54.                     var events2 = touches[1];//双指
  55.                     if (touches.length == 1) {   //单指操作                         
  56.                         pageX = Number(events.pageX);
  57.                         pageY = Number(events.pageY);
  58.                         store.moveable = true;
  59.                         var _obj = $('#innerdiv');
  60.                         //  .css获取的值是字符串
  61.                         position_left = parseFloat(_obj.css('left')
  62.                             .split('px'));
  63.                         position_top = parseFloat(_obj.css('top')
  64.                             .split('px'));
  65.  
  66.                     } else {
  67.                         // 第一个触摸点的坐标
  68.                         store.pageX = events.pageX;
  69.                         store.pageY = events.pageY;
  70.                         store.moveable = true;
  71.                         if (events2) {
  72.                             store.pageX2 = events2.pageX;
  73.                             store.pageY2 = events2.pageY;
  74.                         }
  75.                         store.originScale = store.scale || 1;
  76.                     }
  77.                 }, { passive: false }); //passive: false必须加上,否则控制台报错
  78.                 //开始移动
  79.                 document.addEventListener('touchmove', function (event) {
  80.                     // event.preventDefault();//阻止默认事件，防止底部滚动
  81.                     if (!store.moveable) {
  82.                         return;
  83.                     }
  84.                     var touches = event.touches;
  85.                     var events = touches[0];
  86.                     var events2 = touches[1];
  87.                     if (touches.length == 1) 
  88.                     {
  89.                         var pageX2 = Number(events.pageX);
  90.                         var pageY2 = Number(events.pageY);
  91.                         //控制图片移动
  92.                         $('#innerdiv').css({
  93.                             'top': position_top + pageY2 - pageY + 'px',
  94.                             "left": position_left + pageX2 - pageX + 'px'
  95.                         })
  96.                     } 
  97.                     else 
  98.                     {
  99.                         // 双指移动
  100.                         if (events2) {
  101.                             // 第2个指头坐标在touchmove时候获取
  102.                             if (!store.pageX2) {
  103.                                 store.pageX2 = events2.pageX;
  104.                             }
  105.                             if (!store.pageY2) {
  106.                                 store.pageY2 = events2.pageY;
  107.                             }
  108.  
  109.                             // 获取坐标之间的距离
  110.                             var getDistance = function (start, stop) {
  111.                                 //用到三角函数
  112.                                 return Math.hypot(stop.x - start.x,
  113.                                     stop.y - start.y);
  114.                             };
  115.                             // 双指缩放比例计算
  116.                             var zoom = getDistance({
  117.                                 x: events.pageX,
  118.                                 y: events.pageY
  119.                             }, {
  120.                                 x: events2.pageX,
  121.                                 y: events2.pageY
  122.                             }) / getDistance({
  123.                                 x: store.pageX,
  124.                                 y: store.pageY
  125.                             }, {
  126.                                 x: store.pageX2,
  127.                                 y: store.pageY2
  128.                             });
  129.                             // 应用在元素上的缩放比例
  130.                             var newScale = store.originScale * zoom;
  131.                             // 最大缩放比例限制
  132.                             if (newScale > 3) 
  133.                             {
  134.                                 newScale = 3;
  135.                             }
  136.                             // 记住使用的缩放值
  137.                             store.scale = newScale;
  138.                             // 图像应用缩放效果
  139.                             eleImg.style.transform = 'scale('
  140.                                 + newScale + ')';
  141.                         }
  142.                     }
  143.                 }, { passive: false });//*/
  144.  
  145.                 document.addEventListener('touchend', function () {
  146.                     store.moveable = false;
  147.                     delete store.pageX2;
  148.                     delete store.pageY2;
  149.                 });
  150.                 document.addEventListener('touchcancel', function () {
  151.                     store.moveable = false;
  152.                     delete store.pageX2;
  153.                     delete store.pageY2;
  154.                 });
  155.             });
  156.         //移动端手指页面结束
  157.     });
  158.  
  159.     //遮罩层图片位置
  160.     function imgShow(outerdiv, innerdiv, bigimg, _this) {
  161.         //这是刚才判断是否PC端的函数事件
  162.         var flag = IsPC();
  163.         console.log(flag);
  164.         var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
  165.         $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
  166.         /*获取当前点击图片的真实大小，并显示弹出层及大图*/
  167.         $("<img/>").attr("src", src).load(function () {
  168.             //注意在使用这种方法获取窗口高度和宽度的时候,
  169.             //务必在html页面最上方加上一句<!DOCTYPE html>,否则获取屏幕高度时会出问题
  170.             var windowW = $(window).width();//获取当前窗口宽度
  171.             var windowH = $(window).height();//获取当前窗口高度  
  172.             var realWidth = this.width;//获取图片真实宽度 
  173.             var realHeight = this.height;//获取图片真实高度 
  174.             var imgWidth, imgHeight;
  175.             var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
  176.             if (realHeight > windowH * scale) {//判断图片高度 
  177.                 imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放 
  178.                 imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
  179.                 if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度 
  180.                     imgWidth = windowW * scale;//再对宽度进行缩放 
  181.                 }
  182.             } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度 
  183.                 imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放 
  184.                 imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度 
  185.             } else {//如果图片真实高度和宽度都符合要求，高宽不变 
  186.                 if (flag == false) {
  187.                     imgWidth = realWidth;
  188.                     imgHeight = realHeight;
  189.                 } else if (realWidth >= 1000) {  //这里我怕图片太大又做了个判断
  190.                     imgWidth = realWidth;
  191.                     imgHeight = realHeight;
  192.                 } else {
  193.                     imgWidth = realWidth * 2;
  194.                     imgHeight = realHeight * 2;
  195.                 }
  196.             }
  197.             $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放 
  198.             var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距 
  199.             var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距 
  200.             $(innerdiv).css({
  201.                 "top": h,
  202.                 "left": w
  203.             });//设置#innerdiv的top和left属性 
  204.             $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
  205.         });
  206.         $(outerdiv).click(function () {//再次点击淡出消失弹出层 
  207.             $(this).fadeOut("fast");
  208.         });
  209.     };
  210.  
  211.     function IsPC() 
  212.     {
  213.         var sUserAgent = navigator.userAgent;
  214.         if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {
  215.             return false;
  216.         }
  217.         else {
  218.             return true;
  219.         }
  220.     }
  221. </script>

效果如下图所示：

到此这篇关于基于JS实现点击图片在弹出层显示大图效果的文章就介绍到这了,更多相关JS弹出层显示大图内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号