如题，我想要点击图片的时候弹出居中显示放大。这个功能也是看别人的实现方法而来的，只是有细微的变化轻松解决点击图片放大问题
下面是我自己仿造他写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击图片放大</title>
<script src="../base/jquery-3.4.1.min.js"></script>
<style type="text/css">
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占满整个屏幕*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*添加鼠标移入图片效果*/
.img {
cursor: url("ico/放大镜.png"), auto;
}
</style>
<script type="text/javascript">
$(function () {
$('.img').on('click', function () {
var src = $(this).attr('src');
$('.imgPreview img').attr('src', src);
$('.imgPreview').show()
});
$('.imgPreview').on('click', function () {
$('.imgPreview').hide()
});
})
</script>
</head>
<body>
<img src="picture/ec88b5c0c7387bb24c5169fb5d451c3c.jpeg" class="img">
<div class="imgPreview">
<img src="#" alt="" id="imgPreview">
</div>
</body>
</html>
效果如下
大致说下原理，点击图片触发单击响应事件，半透明的包含块全屏显示，然后图片进行放大居中显示。
包含块如下：
<div class="imgPreview">
<img src="#" alt="" id="imgPreview">
</div>
其样式为
.imgPreview {
display: none;
top: 0;
left: 0;
width: 100%; /*容器占满整个屏幕*/
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
}
1. 实现包含块全屏显示： 开启定位fixed脱离文档流，设置top和left为0（最好top和left都要设置0，我看原作者只设置了top，但我在应用到bootsrap中的时候会出现左边没有覆盖完，必须要设置left也为0），width和height100%使的包含块全屏覆盖，最后设置了半透明度。因为开始设置的隐藏，只有单击图片后才会全屏覆盖显示。
2. 实现图片居中显示： 通过jquery将包含块里的src设置成原有的图片src，然后通过设置包含块内的css样式达到居中放大的目的。其中通过设置width的值（百分比是相对于屏幕尺寸）达到放大的目的，通过设置top和left（百分比是相对于屏幕尺寸）进行定位，使得图片左上角在屏幕正中间，然后设置transform：translate（-50%，-50%）相对自身尺寸移动，使得图片中心位置移动到屏幕中心位置。
.imgPreview img {
z-index: 100;
width: 60%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ps1：中间的代码添加了cursor属性是为了给鼠标移入图片时鼠标指针变成放大镜的模样，具体见通过添加css样式cursor属性，改变鼠标的外形，变成放大镜
ps2:开启fixed定位后，width、height、left、top的百分比都是相对于屏幕而言
本文地址：https://blog.csdn.net/tanxin2721/article/details/112228862
![[Android Pro] Android 4.1 使用 Accessibility实现免Root自动批量安装功能](https://www.kunjuke.com/file/css/thumb/5.jpg/280-180.jpg)
