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 ...
随机推荐
- SpringBoot-06-模板引擎Thymeleaf
6. 模板引擎 Thymeleaf Thyme leaf 英译为 百里香的叶子. 模板引擎 以前开发中使用的jsp就是一个模板引擎,但是springboot 以jar的方式,并且使用嵌入式的tom ...
- ConcurrentHashMap原理分析(二)-扩容
概述 在上一篇文章中介绍了ConcurrentHashMap的存储结构,以及put和get方法,那本篇文章就介绍一下其扩容原理.其实说到扩容,无非就是新建一个数组,然后把旧的数组中的数据拷贝到新的数组 ...
- Java基础系列-SPI你认识吗
原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755313.html 一.SPI是什么 SPI是相对API而言的. API指的是应用对服务调用方提供 ...
- python程序整理(2)
# 写一个函数完成三次登陆功能: # 用户的用户名密码从一个文件register中取出. # register文件包含多个用户名,密码,用户名密码通过|隔开,每个人的用户名密码占用文件中一行. # 完 ...
- boost之multiprecision
multiprecision boost中提供的高精度库,支持高精度整型,浮点型等.并且提供统一的接口模板,只需要指定对应的后端类型即可实现对应类型的高精度计算: boost::multiprecis ...
- PO模式学习笔记
框架: 1.PO模式应用(测试对象和测试用例分离)(写到简历中) 2.引入ddt 3.深入分层:测试数据分离 4.遵循原则:测试用例的独立性 5.深入分层:元素定位分离 6.框架优化:提取basepa ...
- 干货分享：在Windows下使用Visual Studio搭建C语言开发环境
前言:本文将教大家如何使用 VIsual Studio Code 搭建 C 语言开发环境,包括使用 VS Code 如何编译和调试 C 语言程序,需要 用到的工具有 Visual Studio Cod ...
- 【API管理 APIM】如何查看APIM中的Request与Response详细信息，如Header，Body中的参数内容
问题描述 通过APIM门户或者是Developer门户,我们可以通过Test功能测试某一个接口,通过Trace可以获取非常详细的Request,Response的信息,包含Header,X-Forwa ...
- poj1050 To the Max（降维dp）
To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 49351 Accepted: 26142 Desc ...
- kettle学习笔记（三）— 定时任务的脚本执行
kettle-定时任务 Kettle 的定时任务可以用kettle中的job工作来定时转换(缺点窗口不可关闭),同时也可以使用bat脚本来启动kettle的 '.ktr'转换. 注:这里对定时任务的时 ...