html实现点击图片放大功能

2021年6月18日14:56:36 发表评论
微信搜一搜 ts小陈
  1. <html>
  2.     <head>
  3.         <style>
  4.             .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
  5.             .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
  6.         </style>
  7.         <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  8.     </head>
  9.     <body>
  10.         <div class="over"></div><!--背景层-->
  11.         <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
  12.             <img src="test.jpg"/><!-- 此处是引入图片的路径 -->
  13.         </div>
  14.         <script>
  15.             $(document).ready(function () {
  16.                 var imgsObj = $('.amplifyImg img');//需要放大的图像
  17.                 if(imgsObj){
  18.                     $.each(imgsObj,function(){
  19.                         $(this).click(function(){
  20.                             var currImg = $(this);
  21.                             coverLayer(1);
  22.                             var tempContainer = $('<div class=tempContainer></div>');//图片容器
  23.                             with(tempContainer){//width方法等同于$(this)
  24.                                 appendTo("body");
  25.                                 var windowWidth=$(window).width();
  26.                                 var windowHeight=$(window).height();
  27.                                 //获取图片原始宽度、高度
  28.                                 var orignImg = new Image();
  29.                                 orignImg.src =currImg.attr("src") ;
  30.                                 var currImgWidth= orignImg.width;
  31.                                 var currImgHeight = orignImg.height;
  32.                                 if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
  33.                                     if(currImgHeight<windowHeight){
  34.                                         var topHeight=(windowHeight-currImgHeight)/2;
  35.                                         if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
  36.                                             topHeighttopHeight=topHeight-35;
  37.                                             css('top',topHeight);
  38.                                         }else{
  39.                                             css('top',0);
  40.                                         }
  41.                                         html('<img border=0 src=' + currImg.attr('src') + '>');
  42.                                     }else{
  43.                                         css('top',0);
  44.                                         html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
  45.                                     }
  46.                                 }else{
  47.                                     var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
  48.                                     if(currImgChangeHeight<windowHeight){
  49.                                         var topHeight=(windowHeight-currImgChangeHeight)/2;
  50.                                         if(topHeight>35){
  51.                                             topHeighttopHeight=topHeight-35;
  52.                                             css('top',topHeight);
  53.                                         }else{
  54.                                             css('top',0);
  55.                                         }
  56.                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
  57.                                     }else{
  58.                                         css('top',0);
  59.                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
  60.                                     }
  61.                                 }
  62.                             }
  63.                             tempContainer.click(function(){
  64.                                 $(this).remove();
  65.                                 coverLayer(0);
  66.                             });
  67.                         });
  68.                     });
  69.                 }
  70.                 else{
  71.                     return false;
  72.                 }
  73.                 //使用禁用蒙层效果
  74.                 function coverLayer(tag){
  75.                     with($('.over')){
  76.                         if(tag==1){
  77.                             css('height',$(document).height());
  78.                             css('display','block');
  79.                             css('opacity',1);
  80.                             css("background-color","#FFFFFF");
  81.                             css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
  82.                         }
  83.                         else{
  84.                             css('display','none');
  85.                         }
  86.                     }
  87.                 }
  88.             });
  89.         </script>
  90.     </body>
  91. </html>
小陈号卡
ts小陈

发表评论（不允许含有网址！）

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容