点击屏幕显示图片：JavaScript代码示例
以下是一个简单的点击屏幕出现图片的JavaScript代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>点击屏幕出现图片</title>
<style>
#imageContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#imageContainer img {
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id='imageContainer'>
<img src='path/to/image'>
</div>
<script src='path/to/script.js'></script>
</body>
</html>
JavaScript：
var imageContainer = document.getElementById('imageContainer');
var image = imageContainer.querySelector('img');
document.addEventListener('click', function(event) {
imageContainer.style.display = 'block';
image.src = 'path/to/image'; // 更改图片路径
});
这里的代码会在页面上添加一个半透明的黑色背景和一个图片容器。当用户点击页面任意位置，图片容器会显示出来，并展示你指定的图片。你只需要将 path/to/image 替换成你自己的图片路径即可。
原文地址: http://www.cveoy.top/t/topic/m5kG 著作权归作者所有。请勿转载和采集!