js 点击图片全屏查看
时间: 2023-06-10 12:09:07 浏览: 60
您可以使用以下步骤在 JavaScript 中实现点击图片全屏查看:
1. 在 HTML 中,为要全屏显示的图像添加一个单击事件处理程序。例如,您可以使用以下代码:
```
<img src="your-image.jpg" onclick="showFullScreen(this)">
```
2. 在 JavaScript 中,编写一个名为 `showFullScreen` 的函数来处理单击事件:
```
function showFullScreen(img) {
// 创建一个全屏元素
var fullscreenElement = document.createElement("div");
fullscreenElement.className = "fullscreen";
// 创建一个图像元素并将其添加到全屏元素中
var imgElement = document.createElement("img");
imgElement.src = img.src;
fullscreenElement.appendChild(imgElement);
// 将全屏元素添加到文档中
document.body.appendChild(fullscreenElement);
// 添加一个关闭按钮
var closeButton = document.createElement("button");
closeButton.innerHTML = "Close";
closeButton.onclick = function() {
document.body.removeChild(fullscreenElement);
};
fullscreenElement.appendChild(closeButton);
}
```
3. 在 CSS 中,定义 `.fullscreen` 类来设置全屏元素的样式:
```
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.fullscreen img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
.fullscreen button {
position: absolute;
top: 0;
right: 0;
margin: 10px;
}
```
这个代码将创建一个全屏元素,并在其中显示被单击的图像。它还添加了一个关闭按钮,以便用户可以退出全屏模式。