html实现点击图片放大功能

最新推荐文章于 2024-02-29 01:15:50 发布

nzz_171214

最新推荐文章于 2024-02-29 01:15:50 发布

阅读量6.7k

点赞数 2

分类专栏：前端文章标签：图片放大

本文链接：https://blog.csdn.net/m0_37865510/article/details/109842517

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

  <html>
      <head>
          <meta charset="UTF-8"/>
          <title>影城全国分布图</title>
          <meta name="viewport" content="width=device-width,height=device-height;initial-scale=1,maximum-scale=1">
          <style>
              *{
                  margin:0;
                  padding: 0;
              }
              .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
              .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
              
          </style>
          <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
      </head>
      <body>
         <div class="over"></div><!--背景层-->
         <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
             <img src="map.jpg"/><!-- 此处是引入图片的路径 -->
         </div>
         <script>
             $(document).ready(function () {
                 var imgsObj = $('.amplifyImg img');//需要放大的图像
              //                 if(imgsObj){
                     $.each(imgsObj,function(){
                         $(this).click(function(){
                             var currImg = $(this);
                             coverLayer(1);
                             var tempContainer = $('<div class=tempContainer></div>');//图片容器
                             with(tempContainer){//width方法等同于$(this)
                                 appendTo("body");
                                 var windowWidth=$(window).width();
                                 var windowHeight=$(window).height();
                                 //获取图片原始宽度、高度
                                 var orignImg = new Image();
                                 orignImg.src =currImg.attr("src") ;
                                 var currImgWidth= orignImg.width;
                                 var currImgHeight = orignImg.height;
                                 if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
                                     if(currImgHeight<windowHeight){
                                         var topHeight=(windowHeight-currImgHeight)/2;
                                         if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                             topHeight=topHeight-35;
                                             css('top',topHeight);
                                         }else{
                                             css('top',0);
                                         }
                                         html('<img border=0 src=' + currImg.attr('src') + '>');
                                     }else{
                                         css('top',0);
                                         html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                     }
                                 }else{
                                     var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
                                     if(currImgChangeHeight<windowHeight){
                                         var topHeight=(windowHeight-currImgChangeHeight)/2;
                                         if(topHeight>35){
                                             topHeight=topHeight-35;
                                             css('top',topHeight);
                                         }else{
                                             css('top',0);
                                         }
                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
                                     }else{
                                         css('top',0);
                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
                                     }
                                 }
                             }
                             tempContainer.click(function(){
                                 $(this).remove();
                                 coverLayer(0);
                             });
                         });
                     });
                 }

                 //使用禁用蒙层效果
                 function coverLayer(tag){
                     with($('.over')){
                         if(tag==1){
                             css('height',$(document).height());
                             css('display','block');
                             css('opacity',1);
                             css("background-color","#FFFFFF");
                             css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                         }
                         else{
                             css('display','none');
                         }
                     }
                 }

         </script>
     </body>
 </html>

希望对大家有帮助

nzz_171214

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html实现点击图片放大功能

<html> <head> <meta charset="UTF-8"/> <title>魔影国际影城全国分布图</title> <meta name="viewport" content="width=device-width,height=device-height;initial-scale=1,maximum-scale=1"> &...
复制链接

扫一扫