点击事件不生效

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

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

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