<html lang="en">

<head>

   <meta charset="UTF-8">

</head>

<style>

.img_content {

    display: none;

    position: absolute;

    margin: 5% 0 0 40%;

    background-color: white;

    z-index:1002;

    overflow: auto;

    border: solid 1px #3488db;

    height:560px;

    width:420px;

}

.colse_btn {

    border: solid 1px #3488db;

    color: white;

    margin: 5px 10px 0 0;

    height: 30px;

    line-height:30px;

    width: 60px;

    background: #3488db;

    border-radius: .5em;

    display: inline-block;

    outline: none;

    cursor: pointer;

    text-align: center;

    float:right;

}

</style>

<body>

<table border="1">

    <tr>

        <td><img src="D:\image\tu.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>

        <td><img src="D:\image\timg.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>

        <td><img src="D:\image\aaa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>

        <td><img src="D:\image\bb.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>

        <td><img src="D:\image\aa.jpg" width="40px" height="50px" onclick="showImg(this.src)"><td>

    </tr>

</table>

<div class="img_content" id="imgContent">

    <div style="margin: 10px 10px 0 10px;"><img src="" width="400px" height="500px" id="imgCon"></div>

    <div  class="colse_btn" onclick="col()">关闭</div>

</div>

<script>

   function col() {

       document.getElementById('imgContent').style.display='none';

   }

   function showImg(url) {

       document.getElementById('imgCon').src = url;

       document.getElementById('imgContent').style.display='block';

   }

</script>

</body>

</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. STM32之旅3——时钟数

    STM32之旅3--时钟数 STM32F1是M3内核,它的时钟数很庞大,让一个初学者去看,估计会很吃力,和我们入门的8051单片机的时钟不同,这里又倍频.又分频,而且还分成好多个时钟,不同的外设时钟不 ...

  2. 搭建go-stress-testing压力测试

    参考地址:https://github.com/link1st/go-stress-testing安装golang环境 yum install -y golang 下载软件包 wget -q http ...

  3. 2020 CSP-J 初赛答案及解析

    部分咕咕咕的明天一定 单项选择 A A D 解析 : 与z的都是假 C 解析 : $ \frac{2048\times1024\times32}{8\times1024\times1024}=8$ C ...

  4. DVWA渗透测试初级练习

    下面的内容是我2020年后半年进行的简单的dvwa的渗透实验,顺序可能会有一些问题,但是内容我一定会搞完整,DVWA渗透环境的windows10配置phpstudy Command Injection ...

  5. redis协议规范

    好多年前看过redis的代码,那个时候还是2.6的版本,集群和哨兵还没加入正式代码,这几年redis发展的好快.简略翻译一篇文章redis的https://redis.io/topics/protoc ...

  6. 利用Python求解二元一次方程

    本程序流程如下: (1)输入A.B.C (2)计算△ (3)判断解的个数 (4)计算解 (5)输出解 求:x2-3x+2=0的解 #输入A.B.C A=float(input("输入A:&q ...

  7. matplotlib画图教程，设置坐标轴标签和间距

    大家好,欢迎来到周四数据处理专题,我们今天继续matplotlib作图教程. 在上周的文章当中我们介绍了如何通过xlabel和ylabel设置坐标轴的名称,以及这两个函数的花式设置方法,可以设置出各种 ...

  8. docker 升级后或者重装后，启动容器提示：Error response from daemon: Unknown runtime specified docker-runc

    之前安装的版本是docker 1.3,并运行了容器jenkins 现在把docker升级版本为docker-ce 19.03 再使用docker ps发现之前的jenkins容器已经退出了 启动容器: ...

  9. 分析如何直接绕过超时代VPY视频播放器的播放密码

    声明:仅技术交流和学习! 前言: 你有没试过在网上下载一套视频,因网盘限速整整开机下载好几晚,下完后打开发现加密了,又找不到卖家注册.心里是几万只草泥马飞奔啊. 于是不甘心和好奇下,偿试自己破解. 目 ...

  10. Go语言基础知识01-用Go打个招呼

    每一种编程语言,从读一本好书开始 每一种编程语言,也从Helloworld开始 1. 环境准备 1.1 安装golang 在Ubuntu下,直接输入命令可以安装最新版本: $ sudo apt-get ...