点击事件不生效
<!DOCTYPE html><html lang="en">
<head>
<style type="text/css">
/* 省略样式,保持不变 */
<style type="text/css">
.modal {
display: none; /* 初始状态下隐藏弹窗 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 50%;
height: 50%;
overflow: auto; /* 以防图片尺寸大于屏幕尺寸时可以滚动 */
background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
}
.modal-content {
margin: auto;
display: block;
width: auto;
max-width: 80%; /* 设置最大宽度 */
max-height: 80vh; /* 设置最大高度为视口高度的80% */
}
</style>
</style>
</head>
<body>
<div>
<!-- 图片 -->
<img loading="lazy" id="Img1" class="myImg" src="https://img.lzzyimg.com/upload/vod/20240425-1/b10ec7e0b36cd2b8984ec29deff110cc.jpg" onclick="toggleZoom('Img1')">
<!-- 弹窗 -->
<div id="myModal" class="modal" onclick="toggleZoom('Img1')">
<!-- 弹窗内容 -->
<img class="modal-content" id="img01" onclick="event.stopPropagation();">
</div>
<!--相应图片点击操作-->
<script>
var zoomed = false;
function toggleZoom(imgId) {
if (!zoomed) {
// 如果图片未放大,则显示弹窗并放大图片
document.getElementById('myModal').style.display = "block";
document.getElementById("img01").src = document.getElementById(imgId).src;
zoomed = true; // 设置放大状态为true
} else {
// 如果图片已放大,则关闭弹窗
document.getElementById('myModal').style.display = "none";
zoomed = false; // 设置放大状态为false
}
}
</script>
</div>
</body>
</html>
实现点击图片放大或者取消 您的代码逻辑是正确的,点击图片时会调用`toggleZoom`函数来放大或取消放大图片。但是根据您提供的代码片段,我们发现没有为图片绑定点击事件。
解决方法是为每个图片元素添加点击事件监听器,在点击时调用`toggleZoom`函数。您可以在`<img>`标签中添加`onclick`属性,并传递图片的ID作为参数。
以下是修改后的代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
/* 省略样式,保持不变 */
.modal {
display: none; /* 初始状态下隐藏弹窗 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 50%;
height: 50%;
overflow: auto; /* 以防图片尺寸大于屏幕尺寸时可以滚动 */
background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
}
.modal-content {
margin: auto;
display: block;
width: auto;
max-width: 80%; /* 设置最大宽度 */
max-height: 80vh; /* 设置最大高度为视口高度的80% */
}
</style>
</head>
<body>
<!-- 省略部分HTML代码 -->
<img id="img1" src="image1.jpg" onclick="toggleZoom('img1')">
<img id="img2" src="image2.jpg" onclick="toggleZoom('img2')">
<img id="img3" src="image3.jpg" onclick="toggleZoom('img3')">
<div id="myModal" class="modal">
<img id="img01" class="modal-content">
</div>
<script>
var zoomed = false;
function toggleZoom(imgId) {
if (!zoomed) {
// 如果图片未放大,则显示弹窗并放大图片
document.getElementById('myModal').style.display = "block";
document.getElementById("img01").src = document.getElementById(imgId).src;
zoomed = true; // 设置放大状态为true
} else {
// 如果图片已放大,则关闭弹窗
document.getElementById('myModal').style.display = "none";
zoomed = false; // 设置放大状态为false
}
}
</script>
</body>
</html>
在上例中,我添加了三个图片元素,并且为每一个元素添加了`onclick`属性,当点击图片时,调用`toggleZoom`函数,并传递对应的图片ID作为参数。这样就可以实现点击图片放大或取消放大的功能了。
希望能帮到您!
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。 FishC 发表于 2024-4-26 02:54
您的代码逻辑是正确的,点击图片时会调用`toggleZoom`函数来放大或取消放大图片。但是根据您提供的代码片段 ...
图片已经放大了,那怎么在点击图片,图片变原来的大小 maikehong 发表于 2024-04-26 02:57
图片已经放大了,那怎么在点击图片,图片变原来的大小
要实现点击放大的图片后再次点击回到原来大小的效果,可以在`toggleZoom`函数中添加逻辑判断。当图片已经放大时,点击图片就将其恢复为原始大小。
以下是修改后的代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击事件不生效</title>
<style>
/* 省略样式,保持不变 */
.modal {
display: none; /* 初始状态下隐藏弹窗 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 50%;
height: 50%;
overflow: auto; /* 以防图片尺寸大于屏幕尺寸时可以滚动 */
background-color: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
}
.modal-content {
margin: auto;
display: block;
width: auto;
max-width: 80%; /* 设置最大宽度 */
max-height: 80vh; /* 设置最大高度为视口高度的80% */
}
</style>
</head>
<body>
<img id="myImg" src="path/to/your/image.jpg" onclick="toggleZoom('myImg')">
<!-- 弹窗 -->
<div id="myModal" class="modal">
<span class="close" onclick="toggleZoom('myImg')">×</span>
<img class="modal-content" id="img01">
</div>
<script>
var zoomed = false;
function toggleZoom(imgId) {
if (!zoomed) {
// 如果图片未放大,则显示弹窗并放大图片
document.getElementById('myModal').style.display = "block";
document.getElementById("img01").src = document.getElementById(imgId).src;
document.getElementById(imgId).style.transform = "scale(2)"; // 放大图片
zoomed = true; // 设置放大状态为true
} else {
// 如果图片已放大,则关闭弹窗并恢复原始大小
document.getElementById('myModal').style.display = "none";
document.getElementById(imgId).style.transform = "scale(1)"; // 恢复原始大小
zoomed = false; // 设置放大状态为false
}
}
</script>
</body>
</html>
在上例中,我修改了`toggleZoom`函数,在放大图片的时候使用CSS的`transform`属性将其缩放为2倍,并在取消放大时恢复为原始大小。在点击图片和关闭按钮时,都会调用`toggleZoom`函数来实现图片的放大和恢复。
希望能帮到您!
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。
页:
[1]