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

实现过程：

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. opencv在图像显示中文

    在图像定位和模式识别时,经常需要把结果标注到图片上,标注内容可以是数字字母.矩形框等(opencv支持的)或者是中文汉字(借助freetype). 1.显示数字/矩形框 #include <op ...

  2. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  3. 《Django By Example》第一章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...

  4. 15个关于Chrome的开发必备小技巧[译]

    谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...

  5. Linux 常用命令（持续补充）

    常用命令: command &:将进程放在后台执行 ctrl + z:暂停当前进程 并放入后台 jobs:查看当前后台任务 bg( %id):将任务转为后台执行 fg( %id):将任务调回前 ...

  6. 云计算下PAAS的解析一

    云计算下PAAS的解析一       PaaS是Platform-as-a-Service的缩写,意思是平台即服务. 把服务器平台作为一种服务提供的商业模式.通过网络进行程序提供的服务称之为SaaS( ...

  7. Maven搭建SpringMVC+Hibernate项目详解 【转】

    前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这 ...

  8. 彻底搞懂Javascript的“==”

    本文转载自:@manxisuo的<通过一张简单的图,让你彻底地.永久地搞懂JS的==运算>. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容让人犯错,从而 ...

  9. 学习C的笔记

    [unsigned] 16位系统中一个int能存储的数据的范围为-32768~32767,而unsigned能存储的数据范围则是0~65535.由于在计算机中,整数是以补码形式存放的.根据最高位的不同 ...

  10. iOS在导航栏上居中显示分段控件(UISegmentedControl)

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...