要实现点击显示大图的JavaScript效果，你可以使用以下代码示例：
<!DOCTYPE html>
<html>
<head>
<title>点击显示大图效果</title>
<style>
/* 隐藏大图初始状态 */
#largeImage {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
z-index: 9999;
}
#largeImage img {
max-width: 90%;
max-height: 90%;
margin-top: 10%;
}
</style>
</head>
<body>
<!-- 缩略图 -->
<img id="thumbnail" src="thumbnail.jpg" alt="缩略图">
<!-- 大图显示区域 -->
<div id="largeImage">
<img id="largeImg" src="" alt="大图">
</div>
<script>
// 获取缩略图和大图元素
var thumbnail = document.getElementById('thumbnail');
var largeImage = document.getElementById('largeImage');
var largeImg = document.getElementById('largeImg');
// 点击缩略图时显示大图
thumbnail.addEventListener('click', function () {
// 获取大图的URL
var largeImageUrl = 'large.jpg'; // 替换为大图的URL
// 设置大图的src属性
largeImg.src = largeImageUrl;
// 显示大图
largeImage.style.display = 'block';
});
// 点击大图时隐藏
largeImage.addEventListener('click', function () {
largeImage.style.display = 'none';
});
</script>
</body>
</html>
这个示例中，我们首先在页面上创建一个缩略图和一个用于显示大图的隐藏元素。缩略图点击后，通过JavaScript代码将大图的URL设置为要显示的大图的URL，然后将大图元素的显示状态设置为可见。用户点击大图时，大图会被隐藏。
你需要将缩略图和大图的URL替换为实际的图片URL。这个示例创建了一个简单的点击显示大图的效果，你可以根据需要进行进一步的自定义和改进。
本站资源均来源于互联网，仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：如何用JS实现点击显示大图特效
