html中 img标签点击图片于然图片
时间: 2023-08-22 22:03:43 浏览: 51
如果你想让用户点击图片后放大图片,可以使用JavaScript来实现。具体的实现方式如下:
首先,在<img>标签中添加一个onclick事件,当用户点击图片时触发该事件。例如:
```html
<img src="image.jpg" onclick="enlargeImage(this)">
```
然后,编写JavaScript函数enlargeImage来实现图片的放大效果。可以通过创建一个<div>元素来显示放大后的图片,并设置该元素的样式来实现放大效果。例如:
```javascript
function enlargeImage(img) {
// 创建一个<div>元素来显示放大后的图片
var overlay = document.createElement('div');
overlay.className = 'overlay';
// 创建一个<img>元素来显示放大后的图片
var enlargedImage = document.createElement('img');
enlargedImage.src = img.src;
enlargedImage.className = 'enlarged';
// 将<img>元素添加到<div>元素中
overlay.appendChild(enlargedImage);
// 将<div>元素添加到文档中
document.body.appendChild(overlay);
// 禁用页面滚动
document.body.style.overflow = 'hidden';
}
```
最后,在CSS中添加.overlay和.enlarged样式,来设置放大后的图片的样式。例如:
```css
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.enlarged {
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: auto;
}
```
这样,当用户点击图片时,就会显示一个放大后的图片,并且禁用了页面滚动,用户可以通过点击放大后的图片或按ESC键来关闭放大后的图片。