js实现点击图片方大观看
时间: 2023-11-26 07:06:02 浏览: 32
你可以使用以下代码实现点击图片放大观看:
HTML 代码:
```
<div class="image-container">
<img src="your-image-url.jpg" alt="Your Image">
</div>
```
CSS 代码:
```
.image-container {
position: relative;
display: inline-block;
cursor: zoom-in;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container img.zoomed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 9999;
cursor: zoom-out;
}
```
JavaScript 代码:
```
document.addEventListener('click', function(event) {
if (event.target.classList.contains('image-container')) {
event.target.innerHTML += '<img class="zoomed" src="' + event.target.firstElementChild.getAttribute('src') + '">';
} else if (event.target.classList.contains('zoomed')) {
event.target.remove();
}
});
```
这段代码会在页面上监听所有的点击事件。当用户点击图片的容器(`image-container`)时,它会创建一个新的 `img` 元素并添加到容器中,这个新的 `img` 元素会占据整个页面的视图。当用户再次点击这个放大后的图片时,它会被移除。