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

实现过程：

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. Git Bash的一些命令和配置

    查看git版本号: git --version 如果是第一次使用Git,你需要设置署名和邮箱: $ git config --global user.name "用户名" $ gi ...

  2. 数据库的快照隔离级别（Snapshot Isolation）

    隔离级别定义事务处理数据读取操作的隔离程度,在SQL Server中,隔离级别只会影响读操作申请的共享锁(Shared Lock),而不会影响写操作申请的互斥锁(Exclusive Lock),隔离级 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（69）-微信公众平台开发-功能概述

    系列目录 为什么要先发这个文章? 因为接下来的文章是关于微信开发的系列,心中一定要有一个概念,知道自己接下来要做什么功能. 而且微信到处都是坑,我首先要把微信与本地跑通起来才敢发布,否则中间出现坑导致 ...

  4. 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的

    我们在<服务器在管道中的"龙头"地位>中对ASP.NET Core默认提供的具有跨平台能力的KestrelServer进行了介绍,为了让读者朋友们对管道中的服务器具有更 ...

  5. javascript之活灵活现的Array

    前言 就如同标题一样,这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用. 大家都知道Array实例有这四个方法:push.pop.shift.unshift.大家也都知道 pus ...

  6. Mac OS 使用 Vagrant 管理虚拟机（VirtualBox）

    Vagrant(官网.github)是一款构建虚拟开发环境的工具,支持 Window,Linux,Mac OS,Vagrant 中的 Boxes 概念类似于 Docker(实质是不同的),你可以把它看 ...

  7. php注册审核

    通过注册审核,判断刚创建的账户是否可以使用. 后台管理员审核通过后,账号可以使用. 通过session 设置只能通过登录入口进入网页. 原理:通过数据库设置账号的一个字段状态,例: isok:1, i ...

  8. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  9. Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具

    前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...

  10. 深入理解 Android 之 View 的绘制流程

    概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...