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 ...
随机推荐
- Spring Boot+Spring Security+JWT 实现 RESTful Api 认证(二)
Spring Boot+Spring Security+JWT 实现 RESTful Api 认证(二) 摘要 上一篇https://javaymw.com/post/59我们已经实现了基本的登录和t ...
- Oracle 数据库导入数据和编码问题
配置 control 文件: load data characterset utf8 append into table role_res_gold fields terminated by ';' ...
- 两个多维高斯分布之间的KL散度推导
在深度学习中,我们通常对模型进行抽样并计算与真实样本之间的损失,来估计模型分布与真实分布之间的差异.并且损失可以定义得很简单,比如二范数即可.但是对于已知参数的两个确定分布之间的差异,我们就要通过推导 ...
- S3C2440 LCD驱动(FrameBuffer)实例开发<二>(转)
开发板自带的LCD驱动是基于platform总线写的,所以如果要使其它的LCD能够在自己的开发板上跑起来,那么就先了解platform驱动的架构,下面简单记录下自己看platform驱动时体会,简单的 ...
- 多测师讲解jmeter _基本介绍_(001)高级讲师肖sir
jmeter讲课课程 一.Jmeter简介 Jmeter是由Apache公司开发的一个纯Java的开源项目,即可以用于做接口测试也可以用于做性能测试. Jmeter具备高移植性,可以实现跨平台运行. ...
- SQL Server语法入门
1.说明:增加.删除一个列 Alter table tablename add columnName col type alter table tablename drop columnName co ...
- shell携带附件,Linux下的自解压文件诞生了
初衷 windows下有自解压文件,直接双击就能释放文件,并且还能执行释放文件前后要执行的脚本.Linux下我也想要这样的功能,因为我希望直接拷贝一个shell脚本给别人,别人直接运行就能用,而不是一 ...
- 【CodeForces】835F Roads in the Kingdom
一.题目 题目描述 王国有\(n\)座城市与\(n\)条有长度的街道,保证所有城市直接或间接联通,我们定义王国的直径为所有点对最短距离中的最大值,现因财政危机需拆除一条道路并同时要求所有城市仍然联通, ...
- spring boot:接口站增加api版本号后的安全增强(spring boot 2.3.3)
一,接口站增加api版本号后需要做安全保障? 1,如果有接口需要登录后才能访问的, 需要用spring security增加授权 2,接口站需要增加api版本号的检验,必须是系统中定义的版本号才能访问 ...
- 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 ...