主页 / 问题 / 907032
Accepted
Anton Brock
Asked:2020-11-16 00:23:04 +0000 UTC2020-11-16 00:23:04 +0000 UTC

当您单击图像时，它应该以更大的尺寸浮动。一切都很好，但这是你如何将它移到中心，右边缘的一部分是灰色的

  • 772

当您单击图像时，它应该以更大的尺寸浮动。一切都很好，但这是将它移到中心的方法，右边缘的一部分是灰色的。

也许我是盲人，但我根本看不到问题所在。没有颜色变化，没有任何帮助，它只是被裁剪了，就是这样。

jQuery v3.3.1

代码，即脚本及其样式不是我的。我自己对此很陌生。所有与问题（代码）相关的内容都已附上。+ 屏幕

UPD：使用“poke”方法，出于某种原因，我决定在 property.popup_bg中，即它width 100%不是 100%。一输入150%，整个背景变暗，一切正常。同时，如果这个属性不存在，则无法关闭扩展图像。（很可能是脚本的原因）

如果你能告诉我原因，我会很高兴。:)

问题示例

$(document).ready(function() {
  $(".image").click(function() {
    var img = $(this);
    var src = img.attr('src');
    $("body").append("<div class='popup'>" +
      "<div class='popup_bg'></div>" +
      "<img src='" + src + "' class='popup_img' />" +
      "</div>");
    $(".popup").fadeIn(800);
    $(".popup_bg").click(function() {
      $(".popup").fadeOut(800);
      setTimeout(function() {
        $(".popup").remove();
      }, 800);
    });
  });
});
.image {
  /* margin:30px;  */
  /* float:left; */
  cursor: pointer;
  max-height: 300px;
}

.popup_img {
  position: fixed;
  margin: 0 auto;
  z-index: 2;
  max-height: 94%;
  max-width: 94%;
  margin-top: 25px;
  pointer-events: none;
}

.popup {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 300px;
  display: none;
  text-align: center;
}

.popup_bg {
  background: rgba(0, 0, 0, 0.699);
  position: fixed;
  z-index: 1;
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="b3">
  <div class="in3">
    <div class="content3">
      <h2>Your thoughts</h2>
      <div class="audio1">
        <div class="cover1">
          <img src="http://via.placeholder.com/250x250/ff00ff/000000" class="image" width="280px" height="280px" style="margin-bottom: 5px">
          <p class="nameCover1">Citizen — Yellow Love</p>
        </div>
        <audio src="6666.mp3" controls>Citizen — Yellow Love</audio>
      </div>
    </div>
  </div>
</section>

html

1 个回答

  1. Best Answer

    我希望我理解正确

    $(document).ready(function() {
  $(".image").click(function() {
    var img = $(this);
    var src = img.attr('src');
    $("body").append("<div class='popup'>" +
      "<div class='popup_bg'></div>" +
      "<img src='" + src + "' class='popup_img' />" +
      "</div>");
    $(".popup").fadeIn(800);
    $(".popup_bg").click(function() {
      $(".popup").fadeOut(800);
      setTimeout(function() {
        $(".popup").remove();
      }, 800);
    });
  });
});
    * {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.image {
  cursor: pointer;
  max-height: 300px;
}

.popup {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  text-align: center;
}

.popup_bg {
  background: rgba(0, 0, 0, 0.699);
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.popup_img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0 auto;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="b3">
  <div class="in3">
    <div class="content3">
      <h2>Your thoughts</h2>
      <div class="audio1">
        <div class="cover1">
          <img src="http://via.placeholder.com/250x250/ff00ff/000000" class="image" width="280px" height="280px" style="margin-bottom: 5px">
          <p class="nameCover1">Citizen — Yellow Love</p>
        </div>
        <audio src="6666.mp3" controls>Citizen — Yellow Love</audio>
      </div>
    </div>
  </div>
</section>

    • 1

相关问题