javascript - 图像叠加效果点击

问题描述

我正在尝试制作单击图像叠加层，您单击左侧图标并且图像淡入或滑入，但是当您单击右侧图标时，不同的图像淡入或滑入。此外，当您单击任一图标时，关联的图像淡出或滑出。

我一直在尝试使用

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

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

单击图标时使显示从无变为阻塞，但是无法通过两个单独的链接使用此功能。我对javascript不是很好，所以任何帮助都将不胜感激。谢谢。

https://jsfiddle.net/hzfw00L7/

标签： javascriptjquery

你在寻找这样的东西吗？我已经使用 Jquery 来加快编码速度！

$(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);
  });
});

#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;
}

<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>

添加了淡入淡出动画！更多参考请到这里

javascript - 图像叠加效果点击

问题描述

解决方案

推荐阅读