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 ...
随机推荐
- CentOS7 下 swap 分区的创建、删除及相关配置
一般我们在购买云服务器(例如:阿里云ECS.腾讯云服务器)的时候,选择 CentOS 7 系统之后,登录系统,发现 swap 大小为 0(即没有分配). 如果我们想在该 服务器上安装 Oracle 数 ...
- 实验五 用PS制作图文合成海报
实验五 用PS制作图文合成海报 [实验目的] ⑴.熟悉PS软件基本操作 ⑵.学会用PS制作内容较丰富的海报式广告 [实验条件] ⑴.个人计算机一台 ⑵.个人计算机中预装Windows7操作系统和浏览 ...
- 【KM算法】UVA 11383 Golden Tiger Claw
题目大意 给你一个\(n×n\)的矩阵G,每个位置有一个权,求两个一维数组\(row\)和\(col\),使\(row[i] + col[j]\ge G[i][j]\),并且\(∑row+∑col\) ...
- JVM系列【6】GC与调优5-日志分析
JVM系列笔记目录 虚拟机的基础概念 class文件结构 class文件加载过程 jvm内存模型 JVM常用指令 GC与调优 主要内容 分析PS.CMS.G1的回收日志,目标使大概能读懂GC日志. 测 ...
- Docker下部署springboot项目
1.背景 如何在docker容器环境下部署一个springboot项目? 2.具体步骤 第一步:准备一个springboot项目的xxxx.jar包 jar包中用于测试的一个接口如下 第二步:编写Do ...
- switch host 切换本地host
百度网盘提取地址 提取码: 753r 下载后放到软件目录即可使用
- salesforce零基础学习（九十六）项目中的零碎知识点小总结（四）
本篇参考: https://developer.salesforce.com/docs/atlas.en-us.216.0.apexcode.meta/apexcode/apex_classes_ke ...
- linux(CentOS7)_离线_mysql安装
注意:本文系统环境 CentOS 7.7 64位 MySQL Community Server 5.7.32 一丶卸载CentOS7系统中默认的数据库mariadb 原因一:ps原作者的话介绍下背景: ...
- CSS中-moz、-ms、-webkit、-o的意思
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari.chrome浏览器私有属性 -o代表opera浏览器私有属性 上述这些是为了兼容老版本的写法:
- servlet 验证生命周期过程调用方法的次数
1.书写一个servlet并编译,如: package testservlet; import java.io.IOException;import java.io.PrintWriter; impo ...