点击事件不生效

maikehong · 发表于 2024-4-26 02:54:15

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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>
实现点击图片放大或者取消

FishC · 发表于 2024-4-26 02:54:30

您的代码逻辑是正确的，点击图片时会调用`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>
<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 小助理，如未能正确解答您的问题，请继续追问。

maikehong · 发表于 2024-4-26 02:57:04

FishC 发表于 2024-4-26 02:54
您的代码逻辑是正确的，点击图片时会调用`toggleZoom`函数来放大或取消放大图片。但是根据您提供的代码片段 ...

图片已经放大了，那怎么在点击图片，图片变原来的大小

FishC · 发表于 2024-4-26 02:57:24

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 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册