HTML 点击图片放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../files/js/jquery-3.3.1.min.js"></script>
<style>
.image_normal{
width: 200px;
height: 200px
}
.image_large{
width: %;
height: %;
position: fixed;
top: ;
left: ;
background-color: rgba(,,,.);
z-index: ;
display: none
}
.image_large{
z-index: ;
}
</style>
</head> <body>
<!-- 图片放大 -->
<div class=" ">
<img src="../files/img/bcLogina.png" class="image_normal">
<div class="image_large"></div>
</div>
<script type="text/javascript">
$(function () {
$(".image_normal").click(function () {
var large_image = '<img src= ' + $(this).attr("src") + '></img>';
console.log(large_image)
$('.image_large').html($(large_image).css({
display:"block",
height: '50%',
width: '50%',
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)",
}, ));
$('.image_large').css( "display","block" );
});
$('.image_large').click(function(){
$(this).css( "display","none" );
})
});
</script>
</body>
</html>
HTML 点击图片放大的更多相关文章
- 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js+jquery+html实现在三种不通的情况下，点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- layui点击图片放大-多图显示
layui点击图片放大-多图显示 标签(空格分隔): js HTML // div <div id="photo-list"> <img class=" ...
- ios-点击图片放大,背景变半透明
在view中点击一个图片,图片放大,背景变半透明,图片不会变透明的效果图如下 思路:图片框是一个按钮,监听点击事件. 当点击图片后:改变图片的frame,使图片放大,并且在controller.vie ...
- jQuery点击图片放大拖动查看效果
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- 实现类似于QQ空间相册的点击图片放大，再点后缩小回原来位置
前几天看到了有人在android5.0上实现了如下图一样的效果,我自己就去搜了下.参考了国外一篇文章和国内的一篇文章,最终实现了想要的效果.具体参考的网址我已经贴到文章末尾,大家可以去英文的那个网站看 ...
随机推荐
- spark优化设置
->>>配置参数优化 SparkConf sc = new SparkConf().setAppName("com.sp.test.GroupTop3").set ...
- ES6 迭代器
Iterator Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念: 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.itera ...
- Python---http协议.md
一.什么是URL? URL即统一资源定位符(Uniform Resource Locator),用来唯一地标识万维网中的某一个文档.URL由协议.主机和端口(默认为80)以及文件名三部分构成,如: h ...
- python框架之Django(15)-contenttype模块
假如有一个书城系统,需要给作者和书籍加上评论功能.如果给每个表单独建一个评论表,那么我们以后要扩展其它模块评论功能的时候,还需要随之新建一张评论表,会显得很冗余.对于这种情况,Django 给我们提供 ...
- Git环境配置
1,下载Git-2.16.2-64-bit.exe并安装, 全部为默认设置 下载地址:http://git-scm.com/download/win 2 在开始菜单中,单击Git CMD,执行下面命令 ...
- rosetta对称性文件(rosetta symmetry file)的产生及应用
针对对称性PDB 3UKM,使用make_symmdef_file.pl脚本,可以执行产生对称单元及对称文件: $> $ROSETTA3/src/apps/public/symmetry/mak ...
- gateway + jwt 网关认证
思路: 全局过滤器对所有的请求拦截(生成token有效期30分钟,放入redis设置有效期3天.3天之类可以通过刷新接口自动刷新,超过3天需要重新登录.) 前端在调用接口之前先判断token是否过期( ...
- PTA第一个编程题总结
7-1 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数 ...
- Kubernetes与容器设计模式
目录贴:Kubernetes学习系列 在程序设计领域,面向对象设计和面向对象语言是大家最为熟悉和强大的工具,而面向对象除了其强大的核心特性之外,还有人们通过实践总结出来的一系列设计模式,可以用来解决实 ...
- Hdu2039 三角形
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2039 三角形 Time Limit: 2000/1000 MS (Java/Others) Me ...