代码很简单，在这里就不过多阐述，先上示例图：

实现过程：

html部分代码很简单

 <div id="outer">

    <p>点击图片</p>

    <img src="data:image/0.gif" title="点击图片放大缩小" />

    <img src="data:image/项目管理十大知识领域逻辑关系.png" title="点击图片放大缩小" />

   </div>

js部分

 function expandPhoto(){

     var overlay = document.createElement("div"); //创建div

     overlay.setAttribute("id","overlay");  //给div添加id

     overlay.setAttribute("class","overlay");  //给div添加class

     document.body.appendChild(overlay);  //向页面中显示此div

     var img = document.createElement("img");

     img.setAttribute("class","overlayimg");

     img.src = this.getAttribute("src");

     document.getElementById("overlay").appendChild(img);  

     img.onclick = restore;

 }

 function restore(){

     document.body.removeChild(document.getElementById("overlay"));

     document.body.removeChild(document.getElementById("img"));

 }

 window.onload = function(){

     var imgs = document.getElementsByTagName("img");//找到所有img

     imgs[0].focus();

     for(var i = 0;i<imgs.length;i++){

         imgs[i].onclick = expandPhoto;  //绑定点击事件，执行方法

         imgs[i].onkeydown = expandPhoto;

     }  

 }

css部分（主要是针对新增div的样式）

  img{padding:5px;width:100px;height:auto;cursor: pointer;}

     #outer{

         width:100%;

         height:100%;

     }

     .overlay{

         background-color:#000;

         opacity: .7;

         filter:alpha(opacity=70);

         position: fixed;

         top:;

         left:;

         width:100%;

         height:100%;

         z-index:;

     }

     .overlayimg{

         position: absolute;

         z-index:;

         left:24%;

         top:55px;

         width:auto;

         cursor: pointer;

     }

全部代码（修改图片途径即可）

 <!DOCTYPE html>

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

   <title>点击图片显示大图</title>

   <style>

     img{padding:5px;width:100px;height:auto;cursor: pointer;}

     #outer{

         width:100%;

         height:100%;

     }

     .overlay{

         background-color:#000;

         opacity: .7;

         filter:alpha(opacity=70);

         position: fixed;

         top:0;

         left:0;

         width:100%;

         height:100%;

         z-index: 10;

     }

     .overlayimg{

         position: absolute;

         z-index: 11;

         left:24%;

         top:55px;

         width:auto;

         cursor: pointer;

     }

 </style>

   <script>

 function expandPhoto(){

     var overlay = document.createElement("div"); //创建div

     overlay.setAttribute("id","overlay");  //给div添加id

     overlay.setAttribute("class","overlay");  //给div添加class

     document.body.appendChild(overlay);  //向页面中显示此div

     var img = document.createElement("img");

     img.setAttribute("class","overlayimg");

     img.src = this.getAttribute("src");

     document.getElementById("overlay").appendChild(img);  

     img.onclick = restore;

 }

 function restore(){

     document.body.removeChild(document.getElementById("overlay"));

     document.body.removeChild(document.getElementById("img"));

 }

 window.onload = function(){

     var imgs = document.getElementsByTagName("img");//找到所有img

     imgs[0].focus();

     for(var i = 0;i<imgs.length;i++){

         imgs[i].onclick = expandPhoto;  //绑定点击事件，执行方法

         imgs[i].onkeydown = expandPhoto;

     }  

 }

 </script>

  </head>

  <body>

   <div id="outer">

    <p>点击图片</p>

    <img src="data:image/0.gif" title="点击图片放大缩小" />

    <img src="data:image/项目管理十大知识领域逻辑关系.png" title="点击图片放大缩小" />

   </div>

  </body>

 </html>

(JS+CSS)实现图片放大效果的更多相关文章

  1. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  2. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  4. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  5. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  6. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  7. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

随机推荐

  1. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  2. Windows server 2012 添加中文语言包(英文转为中文)（离线）

    Windows server 2012 添加中文语言包(英文转为中文)(离线) 相关资料: 公司环境:亚马孙aws虚拟机 英文版Windows2012 中文SQL Server2012安装包,需要安装 ...

  3. Asp.Net MVC中使用StreamReader读取“Post body”之应用场景。

    场景:有三个市场(Global.China.USA),对前台传过来的数据有些验证需要细化到每个市场去完成. 所以就出现了基类(Global)和派生类(China.USA) 定义基类(Global)Pe ...

  4. PHP-解析验证码类--学习笔记

    1.开始 在 网上看到使用PHP写的ValidateCode生成验证码码类,感觉不错,特拿来分析学习一下. 2.类图 3.验证码类部分代码 3.1  定义变量 //随机因子 private $char ...

  5. SQL Server-聚焦NOT IN VS NOT EXISTS VS LEFT JOIN...IS NULL性能分析（十八）

    前言 本节我们来综合比较NOT IN VS NOT EXISTS VS LEFT JOIN...IS NULL的性能,简短的内容,深入的理解,Always to review the basics. ...

  6. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  7. [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性

    回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...

  8. 在开启DRS的集群中修复VMware虚拟主机启动问题

    通过iSCSI方式连接到ESXi主机上的外挂存储意外失联了一段时间,导致部分虚拟主机在集群中呈现出孤立的状态,单独登陆到每台ESXi上可以看到这些虚拟主机都变成了unknow状态.因为有过上一次(VM ...

  9. DOM、BOM 操作超级集合

    本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...

  10. StringUtils的isBlank与isEmply

    1.public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 StringUtil ...