html + 原生javascript简单实现 点击图片 原位置进行 居中缩放查看功能
1. 实现要点
- 使用
getBoundingClientRect()方法获取原始图片的左上角位置
- 蒙版中的图片要使用
fixed定位
- 蒙版图片的水平和垂直居中使用
top:50%;left:50%;transform:translate(-50%,-50%)来实现
2. 注意事项
- 每次点击事件发生时要把transform属性置空或清除，否则会影响重复点击时图片的过渡动画起始位置
- 谨慎使用
vw和vh属性，这两个属性将浏览器的滚动条包含在里面，使用百分比进行设置则不会将滚动条包含在内
3. 效果展示
4. 源码自取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>picture-snapshot</title>
<style>
body {
width: 100%;
padding-top: 60vh;
text-align: center;
height: 200vh;
margin: 0;
}
body>img {
max-width: 50vw;
cursor: zoom-in;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-div {
width: 100%;
height: inherit;
}
@keyframes modal {
from {
background-color: transparent;
}
to {
background-color: rgba(0, 0, 0, 0.5);
}
}
.close-icon {
position: absolute;
top: 30px;
right: 30px;
color: #fff;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
display: inline-block;
cursor: pointer;
border-radius: 50%;
border: 1px solid #fff
}
#img {
transition: all .6s ease;
max-width: 80vw;
cursor: zoom-out;
position: fixed;
}
</style>
</head>
<body>
<p style="font-weight: bold;font-size:22px">@一个前端er</p>
<img class=".img"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598728676900&di=f3edf225a9e2fb847585319f12c6e677&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D1307125826%2C3433407105%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D5760%26h%3D3240"
alt="">
<div class="modal">
<span class="close-icon">×</span>
<div class="modal-div"> <img id="img"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598728676900&di=f3edf225a9e2fb847585319f12c6e677&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D1307125826%2C3433407105%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D5760%26h%3D3240"
alt="加载失败"></div>
</div>
<script>
document.addEventListener('click', function (e)
{
const el = e.target
if (el.className === ".img") {
const modal = document.querySelector('.modal')
modal.style.animation = "modal .6s ease"
let modalImg = document.getElementById('img')
const rect = el.getBoundingClientRect()
modalImg.width = el.width
modalImg.height = el.height
modalImg.style.transform = ""
modalImg.style.top = rect.top + "px"
modalImg.style.left = rect.left + "px"
modal.style.display = "block"
requestAnimationFrame(() =>
{
modalImg.style.top = "50%"
modalImg.style.left = '50%'
modalImg.style.transform = "translate(-50%,-50%) scale(1.2)"
modalImg = null
})
console.log(el.offsetLeft, el.offsetTop);
}
else if (el.className === "close-icon" || el.id === "img") {
const modal = document.querySelector('.modal')
modal.style.animation = ""
el.style.transform = ""
modal.style.display = "none"
}
})
</script>
</body>
</html>