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

实现过程：

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. 探索ASP.NET MVC5系列之~~~6.Session篇（进程外Session）

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  2. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  3. 【NLP】蓦然回首：谈谈学习模型的评估系列文章（一）

    统计角度窥视模型概念 作者:白宁超 2016年7月18日17:18:43 摘要:写本文的初衷源于基于HMM模型序列标注的一个实验,实验完成之后,迫切想知道采用的序列标注模型的好坏,有哪些指标可以度量. ...

  4. Python 正则表达式入门（中级篇）

    Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...

  5. ASP.NET MVC关于Ajax以及Jquery的无限级联动

    ---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...

  6. iOS之解决崩溃Collection <__NSArrayM: 0xb550c30> was mutated while being enumerated.

    崩溃提示:Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <CAL ...

  7. Android开发学习—— Fragment

    #Fragment* 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容* 生命周期方法跟Activity一致,可以理解把其为就是一个Activity* 定义布局文件作 ...

  8. ios 类似微信红点显示功能

    设计思路:给UIView增加一个分类 所有的视图都可以根据需要来进行红点显示 #import <UIKit/UIKit.h> @interface UIView (CHRRedDot) @ ...

  9. Atitit.attilax软件研发与项目管理之道

    Atitit.attilax软件研发与项目管理之道 1. 前言4 2. 鸣谢4 3. Genesis 创世记4 4. 软件发展史4 5. 箴言4 6. 使徒行传 4 7. attilax书 4 8. ...

  10. OpenSUSE下编译安装OpenFoam

    在不是Ubuntu系统下安装OpenFoam,需要采用编译安装的方式.以下以OpenSuSE为例进行编译安装. 1 软件包准备 需要下载两个程序包: OpenFOAM-4.x-version-4.1. ...