1. <html lang="en">
  2. <head>
  3.    <meta charset="UTF-8">
  4. </head>
  5. <style>
  6. .img_content {
  7.     display: none;
  8.     position: absolute;
  9.     margin: 5% 0 0 40%;
  10.     background-color: white;
  11.     z-index:1002;
  12.     overflow: auto;
  13.     border: solid 1px #3488db;
  14.     height:560px;
  15.     width:420px;
  16. }
  17. .colse_btn {
  18.     border: solid 1px #3488db;
  19.     color: white;
  20.     margin: 5px 10px 0 0;
  21.     height: 30px;
  22.     line-height:30px;
  23.     width: 60px;
  24.     background: #3488db;
  25.     border-radius: .5em;
  26.     display: inline-block;
  27.     outline: none;
  28.     cursor: pointer;
  29.     text-align: center;
  30.     float:right;
  31. }
  32. </style>
  33. <body>
  34. <table border="1">
  35.     <tr>
  36.         <td><img src="D:\image\tu.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
  37.         <td><img src="D:\image\timg.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
  38.         <td><img src="D:\image\aaa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
  39.         <td><img src="D:\image\bb.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
  40.         <td><img src="D:\image\aa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>
  41.     </tr>
  42. </table>
  43. <div class="img_content" id="imgContent">
  44.     <div style="margin: 10px 10px 0 10px;"><img src="" width="400px" height="500px" id="imgCon"></div>
  45.     <div  class="colse_btn" onclick="col()">关闭</div>
  46. </div>
  47. <script>
  48.    function col() {
  49.        document.getElementById('imgContent').style.display='none';
  50.    }
  51.    function showImg(url) {
  52.        document.getElementById('imgCon').src = url;
  53.        document.getElementById('imgContent').style.display='block';
  54.    }
  55. </script>
  56. </body>
  57. </html>

备注：img标签里的src路径别忘了改成你自己的（针对新手）

HTML图片点击放大---关闭的更多相关文章

  1. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  2. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  3. Android中Textview显示Html，图文混排，支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  4. vue图片点击放大功能

    因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换.当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不 ...

  5. 动画--android图片点击放大动画，并遮挡旁边的控件

    http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

  6. [置顶] ios 网页中图片点击放大效果demo

    demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...

  7. Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

    文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...

  8. vue实现图片点击放大

    用的vue-cli开发的项目,下面是具体实现代码 子组件: <template> <!-- 过渡动画 --> <transition name="fade&qu ...

  9. vue图片点击放大预览

    第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...

随机推荐

  1. 一文带你定制unittest测试用例的名称

    在之前的文章中,我在之前的文章中提到过,这里呢,考虑后,感觉之前的写法不够优雅,于是乎呢,我自己抽空去研究了下,主要是新写方法,这样呢,以后的要使用的时候,可以直接去使用,而不是每次换个环境就要修改环 ...

  2. jquery购物车全选，取消全选，计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

  3. 设置 eclipse C++ 版本

    gcc 版本 4.8.5 20150623 (Red Hat 4.8.5-28) (GCC) 默认是使用 C++ 98 版本进行编译 设置 eclipse 中 C++ 的版本: Project  -& ...

  4. 常见的Mysql十款高可用方案

    简介 我们在考虑MySQL数据库的高可用架构时,主要考虑如下几方面: 如果数据库发生了宕机或者意外中断等故障,能尽快恢复数据库的可用性,尽可能的减少停机时间,保证业务不会因为数据库的故障而中断. 用作 ...

  5. 多测师讲解python __for 循环___高级讲师肖sir

    横向输出 1.遍历字符串 2.遍历列表 3.遍历元组 方法一: 方法二: 方法三: #循环字典:方法一# dict1={"name":"zhihao",&quo ...

  6. 从源码的角度解析Mybatis的会话机制

    坐在我旁边的钟同学听说我精通Mybatis源码(我就想不通,是谁透漏了风声),就顺带问了我一个问题:在同一个方法中,Mybatis多次请求数据库,是否要创建多个SqlSession会话? 可能最近撸多 ...

  7. 用算法去扫雷(go语言)

    最初的准备 首先得完成数据的录入,及从扫雷的程序读取界面数据成为我的算法可识别的数据 其次是设计扫雷的算法,及如何才能判断格子是雷或者可以点击鼠标左键和中键. 然后将步骤2的到的结果通过我的程序实现鼠 ...

  8. 比特币PoW

    比特币区块头结构 字段 大小(Byte) 说明 nVersion 4 区块版本号,表示本区块遵守的验证规则 hashPrevBlock 32 前一区块的哈希值,使用SHA256(SHA256(父区块头 ...

  9. spring boot:用dynamic-datasource-spring-boot-starter配置druid多数据源(spring boot 2.3.3)

    一,dynamic-datasource-spring-boot-starter的用途? 1,dynamic-datasource-spring-boot-starter 是一个基于springboo ...

  10. centos8平台使用xfs文件系统

    一,xfs文件系统的特点 XFS是一种高性能的日志文件系统, 它是由SGI公司设计的,被称为业界最先进的.最具可升级性的文件系统技术. 最初是从unix(irix)移植到linux系统上的. 从cen ...