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

点击事件不生效

<!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')">&times;</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]
查看完整版本: 点击事件不生效