HTML图片点击放大---关闭
<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图片点击放大---关闭的更多相关文章
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
- Android中Textview显示Html，图文混排，支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- vue图片点击放大功能
因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换.当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不 ...
- 动画--android图片点击放大动画，并遮挡旁边的控件
http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...
- [置顶] ios 网页中图片点击放大效果demo
demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...
- Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效
文章目录 广告: 背景 发现 解决 get技能 广告: 本人博客地址:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.git ...
- vue实现图片点击放大
用的vue-cli开发的项目,下面是具体实现代码 子组件: <template> <!-- 过渡动画 --> <transition name="fade&qu ...
- vue图片点击放大预览
第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...
随机推荐
- servercat IOS Linux监控 SSH客户端
servercat IOS Linux监控 SSH客户端 iOS 平台上新出的一个挺有趣的服务器监控 + SSH 客户端. 监控服务器状态,内存.CPU.网络 还能对Docker容器进行监控 价格:￥ ...
- shell-的bash内部命令变量介绍与shift等
一:shell的bash内部命令变量介绍与shift等 1. bash内部变量 有些内部命令在目录列表时是看不见的,他们有shell本身提供,常用的内部命令有:echo,eval,exec,e ...
- 虚拟主机和ECS的选择——有的坑你可以不躺，有的钱你可以不花（一）
一直想做网站,由于最开始虚拟主机有优惠,所以三年前买了虚拟主机,后来一直续费,间歇性使用过,发现很多功能都不行. 昨天准备买新的,然后想起学生购买有优惠,于是开始了学生认证之旅. 首先,看一下之前 ...
- Activiti6.0获取下一节点任务的心路历程
在我的开发任务中,我被分配了一个像下一个节点审批人发送短信的任务,这个任务看起来非常的简单,但在开发过程中遇到了许多的坑,在这里进行记录,如果你想要快速知道结果,请看代码版本(3). 首先,就是获取下 ...
- 对NETIF_F_GSO的一些理解
看linux内核协议栈的时候看到tcp_sendmsg函数,看起来并不难理解,但是申请skb的时候主buff大小让我很困惑.我以前一直以为会根据sack/ip option/pmtu等计算一个mss, ...
- MeteoInfoLab脚本示例：SeaWiFS HDF Grid数据
SeaWiFS HDF Grid数据读取,特别是涉及到了文件的众多属性数据的读取,数据取对数后绘图.脚本程序: #Add data file f = addfile('D:/Temp/hdf/S199 ...
- 本地环境Django配置问题
Django本地环境出现的问题 当你的前端出现这个问题的时候 你只需要吧setting.py 中的DEBUG 改为 True,即可 我原来是是DEBUG = False 本人亲测有用!!!
- pytest文档44-allure.dynamic动态生成用例标题
前言 pytest 结合 allure 描述用例的时候我们一般使用 @allure.title 和 @allure.description 描述测试用例的标题和详情. 在用例里面也可以动态更新标题和详 ...
- Linux基础命令之.命令
. 点命令 .命令等同source 可以让配置文件被读到进程中,立刻生效
- Java中的String到底占用多大的内存空间？你所了解的可能都是错误的！！
写在前面 最近小伙伴加群时,我总是问一个问题:Java中的String类占用多大的内存空间?很多小伙伴的回答着实让我哭笑不得,有说不占空间的,有说1个字节的,有说2个字节的,有说3个字节的,有说不知道 ...