话不多说，直接上代码

  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.                                              topHeight=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.                                              topHeight=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>

over！over！over！

html实现点击图片放大功能的更多相关文章

  1. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. Typora配置双击图片放大功能

    在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...

  3. jqzoom插件图片放大功能的一些BUG

    建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...

  4. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  5. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  6. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  7. 图片放大功能如何做？jquery实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  8. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  9. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

随机推荐

  1. hdu1878欧拉回路(DFS+欧拉回路)

    欧拉回路 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  2. DotNetBar MessageBoxEx 显示中文 显示office2007风格

    MessageBoxEx显示消息的时候按钮是中文的解决这个问题设置 MessageBoxEx的UseSystemLocalizedString属性为 true. MessageBoxEx.UseSys ...

  3. 深入理解Java：注解（Annotation）自己定义注解入门

    深入理解Java:注解(Annotation)自己定义注解入门 要深入学习注解.我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前.我们就必须要了解Java为我们提供的元注解和相关定义注解的 ...

  4. [IT新应用]如何拯救死机的苹果手机（iPhone X）

    突然白天接了一个电话,苹果就死机了.这是用这个手机半年来第一次.貌似还能接电话,就是屏幕上一个白色的圆圈,一直转啊转. 后来百度了一下,找到这一篇.将重点部分摘录如下: http://www.sohu ...

  5. javascript正则表达式提取子匹配项

    C#里所用的正则表达式,如果要提取字符串里的子匹配项(我都不知道那个叫啥名字,别名?)是很方便的,比如: Regex rx = new Regex(@"<title>(?< ...

  6. 5 Ways to Make Your Hive Queries Run Faster

    5 Ways to Make Your Hive Queries Run Faster Technique #1: Use Tez  Hive can use the Apache Tez execu ...

  7. 高速排序及优化（Java版）

    高速排序(Quicksort)是对冒泡排序的一种改进. 高速排序由C. A. R. Hoare在1962年提出. 一次高速排序具体过程: 选择数组第一个值作为枢轴值. 代码实现: package Qu ...

  8. MongoDB 数据库、集合创建删除与文档插入

    本文章主要介绍mongodb的基本命令,前提条件,你的本地已经安装了mongo. 一.基本命令使用(主要是创建,增删改.) 0.mongoDb统计信息 获得关于MongoDB的服务器统计,需要在Mon ...

  9. SAP建数据库索引

    [转]SAP建数据库索引   %_hints  db6 'INDEX("MKPF","MKPF~BUD")'           db6 'INDEX(&quo ...

  10. bzoj4486: [Jsoi2015]串分割

    肉丝哥哥钦定好题 话说我的blog现在为什么到处都是肉丝哥哥 先来想一个弱化版,假如能够n整除K怎么做? 把每个数字看成一个字符串,按字典序排名,这个可以后缀数组解决,然后暴力枚举每种情况,O(1)判 ...