话不多说，直接上代码

 <html>

     <head>

         <style>

             .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="test.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);

                             });

                         });

                     });

                 }

                 else{

                     return false;

                 }

                 //使用禁用蒙层效果

                 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>

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. PHP 7.1.5编译安装

    1. 安装基础组件 yum install -y libxml2 libxml2-devel bzip2 bzip2-devel curl-devel libjpeg libjpeg-devel li ...

  2. 关于mongorc.js文件详解

    最近阅读了<<mongodb权威指南第二版>>,发现这本书比之前的第一版好,很多地方讲解很详细.下面就翻译下谈下这个文件. 首先,启动shell的时候,mongorc.js文件 ...

  3. 富文本编辑器 - RichEditor

    基本功能 RichEditor 是一个继承自 WebView 的自己定义 view,枚举类型 Type 定了它所支持的排版格式: public enum Type { BOLD, ITALIC, SU ...

  4. HTML5学习笔记简明版（9）：变化的元素和属性

    改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...

  5. 监控hadoop任务结果shell脚本

    需求:每日hadoop结果文件中,找出数据不完整的日期和没有跑出数据的日期,重新进行跑hadoop任务 分析:在result/目录生成的文件中数据有2个特点 第一:日期有,但是数据不完整 第二:日期对 ...

  6. Redisson实现Redis分布式锁的N种姿势（转）

    Redis几种架构 Redis发展到现在,几种常见的部署架构有: 单机模式: 主从模式: 哨兵模式: 集群模式: 我们首先基于这些架构讲解Redisson普通分布式锁实现,需要注意的是,只有充分了解普 ...

  7. java之冒泡排序

    //冒泡排序(Bubble Sorting)的基本思想是:通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码,若发现逆序则交换,使排序码较小的元素逐渐从后部移向前部(从下标较大 ...

  8. BZOJ3627: [JLOI2014]路径规划

    BZOJ3627: [JLOI2014]路径规划 Description 相信大家都用过地图上的路径规划功能,只要输入起点终点就能找出一条最优路线.现在告诉你一张地图的信息,请你找出最优路径(即最短路 ...

  9. spawn类参数command详解

    我们主要来看spawn类它的构造方法参数主要有command,从字面上就是指spawn类的子程序用来执行的子程序,也就是系统所能够执行的相应的命令,对于command这个参数,我们是以字符串的方式给出 ...

  10. ABAP OLE常用方法和属性

    转自 http://www.cnblogs.com/eric0701/p/5213694.htmlSAP EXCEL OLE常用方法和属性 附加网上找到的比较好的源代码示例一份 1.ole中如何保存和 ...