Question

我正在尝试制作点击图片叠加层，点击左侧图标，图片会淡入或滑入，但当您点击右侧图标时，其他图片会淡入或滑入。此外，当您点击任一图标时，相关图像淡出或滑出。

我一直在尝试使用

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}

单击图标时显示从无到阻止，但无法使用此功能和两个单独的链接。我对javascript不太好，所以任何帮助都将非常感激。谢谢。

https://jsfiddle.net/hzfw00L7/

Answer 1

你正在寻找这样的东西吗？我用Jquery来加速编码！

＆＃13;

$(document).ready(function() {
  $(".left").click(function() {
    $("#overlay").fadeIn(3000);
  });
  $(".right").click(function() {
    $("#overlay2").fadeIn(3000);
  });
  $("#overlay").click(function() {
    $("#overlay").fadeOut(2000);
  });
  $("#overlay2").click(function() {
    $("#overlay2").fadeOut(2000);
  });
});

＆＃13;

#overlay {
  position: fixed;
  z-index: 4;
  display: none;
  width: 100%;
  height: 350px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer;
}

#overlay2 {
  position: fixed;
  z-index: 4;
  display: none;
  width: 100%;
  height: 350px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  z-index: 2;
  cursor: pointer;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#content {
  padding: 20px;
}

a.left {
  display: block;
  position: absolute;
  top: 320px;
  left: 80px;
  z-index: 6;
  height: 20px;
  background-color: purple;
  color: white;
  font-family: Arial;
  padding: 10px;
}

a.right {
  display: block;
  position: absolute;
  top: 320px;
  right: 80px;
  z-index: 7;
  height: 20px;
  background-color: magenta;
  color: white;
  font-family: Arial;
  padding: 10px;
}

#buttons {
  height: 50px;
  width: 300px;
  margin: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
  <div id="overlay">
    <div id="text">Overlay Text</div>
  </div>
  <div id="overlay2">
    <div id="text">Overlay Text 2</div>
  </div>
  <div id="content">
    <div id="buttons">
      <a class="left">Turn on overlay effect</a>
    </div>
    <div id="content">
      <a class="right">Turn on overlay effect 2</a>
    </div>
  </div>
</body>
</html>

＆＃13;

添加了淡入和淡出动画！ For More Reference Go here

图像叠加效果点击

1 个答案: