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

实现过程：

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. [linux]阿里云主机的免登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  2. 认识 Azure

    本文为官网摘录总结

  3. SQL Server-聚焦计算列或计算列持久化查询性能（二十二）

    前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...

  4. Jquery（1）

    鼠标点击事件: <input type="button" value="测试" onclick="test()" /> < ...

  5. 要想提高PHP的编程效率，你必须知道的要点

    1.当操作字符串并需要检验其长度是否满足某种要求时,你想当然地会使用strlen()函数.此函数执行起来相当快,因为它不做任何计算,只返回在zval 结构(C的内置数据结构,用于存储PHP变量)中存储 ...

  6. 微信小程序的机会在于重新理解群组与二维码

    历时一年,唯一一个尚未发布就获得Pony Ma与Allen Zhang站台的产品:微信小程序,将于2017年1月9日正式上线了.我很期待.唯一要警惕的是:防止长考出臭棋. 在上线前夕,我对于如何借助小 ...

  7. 体验报告：微信小程序在安卓机和苹果机上的区别

    很多人可能会问:微信小程序和在微信里面浏览一个网页有什么区别? 首先,小程序的运行是全屏的,界面跟进入了一个APP很像,更为沉浸跟在微信里面访问h5不一样:其次,它的浏览体验更为稳定. 不过,这还不够 ...

  8. AutoIt实现Webdriver自动化测试文件上传

    在运用WebDriver进行自动化测试时,由于WebDriver自身的限制,对于上传文件时Windows弹出的文件选择窗口无法控制,通过在网上查找资料锁定使用AutoIt来控制文件上传窗口. Auto ...

  9. BZOJ 1597: [Usaco2008 Mar]土地购买 [斜率优化DP]

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4026  Solved: 1473[Submit] ...

  10. 不该活着的SqlHelper和DBHelper

    前言: 还记得刚学ADO.NET的情景么? 还记得当年是怎么从ADO.NET被忽悠到用SqlHelper的么? 话说从入门到走上工作岗位那些年,我们就一直被纯纯地教导或引导,ADO.NET太原始,得封 ...