Question

我想做类似的事情-当我按关于时，这样将在主div上显示带有文本的叠加层。现在，当我单击时，将显示该div，但它将向下移动该particles-js div。而且我不想移动该div，但我想在该粒子上显示（不透明度为50％的全屏覆盖）

$(".about").click(function() {
  $(".main").fadeToggle('500');
  $(".aboutText").fadeToggle('500');
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#particles-js {
  height: 100vh;
  width: 100%;
  background-color: green;
}

#about {
  height: 100vh;
  background-color: beige;
}

h1.main {
  color: white;
  position: absolute;
  padding: 0;
  margin: 0 auto;
  top: 50%;
  display: inline-block;
  left: 50%;
  text-align: center;
  font-size: 4.5em;
  transform: translate(-50%, -50%);
}

h2 {
  color: white;
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 2em;
}

a.logo {
  text-decoration: none;
  color: #2ecc71;
}

span.home {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: rotate(90deg);
  color: #fff;
  font-size: 1em;
}

a.about {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: rotate(270deg);
  color: #fff;
  font-size: 1em;
}

a.about {
  text-decoration: none;
  color: #fff;
}

@media only screen and (max-width: 500px) {
  .site-nav a {
    padding: 2em;
    font-size: 1.5em;
  }
}

.text {
  color: #fff;
  position: relative;
  top: 50%;
  left: 10%;
  background-color: #000;
  display: none;
}

a.about:hover {
  color: #2ecc71;
}

.aboutText {
  background-color: #000;
  width: 100%;
  height: 100vh;
  background-size: cover;
  opacity: 0.5;
  position: relative;
  display: none;
}

.aboutText--open {
  background-color: #000;
  width: 100%;
  height: 100vh;
  background-size: cover;
  opacity: 0.5;
  position: relative;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<body>
  <div class="aboutText">
    <div class="text">
      <p>sssss</p>
    </div>
  </div>
  <div id="particles-js">
    <h1 class="main">Text</h1>
  </div>
  <span class="home">Home</span>
  <a href="#" class="about">About</a>

  <div id="about">

  </div>
  <div id="portfolio"></div>
  <div id="contact"></div>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="js/particles.js"></script>
  <script src="app.js"></script>


</body>

</html>

Answer 1

这是您要尝试做的吗？单击时显示关于文本吗？

$(".about").click(function() {
  $("#particles-js").toggleClass("hide")
  $(".aboutText").toggleClass("hide")  
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
body {
  background: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#particles-js {
  height: 100vh;
  width: 100%;
  background-color: green;
}

#about {
  height: 100vh;
  background-color: beige;
}

h1.main {
  color: white;
  position: absolute;
  padding: 0;
  margin: 0 auto;
  top: 50%;
  display: inline-block;
  left: 50%;
  text-align: center;
  font-size: 4.5em;
  transform: translate(-50%, -50%);
}

h2 {
  color: white;
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 2em;
}

a.logo {
  text-decoration: none;
  color: #2ecc71;
}

span.home {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: rotate(90deg);
  color: #fff;
  font-size: 1em;
}

a.about {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: rotate(270deg);
  color: #fff;
  font-size: 1em;
}

a.about {
  text-decoration: none;
  color: #fff;
}

@media only screen and (max-width: 500px) {
  .site-nav a {
    padding: 2em;
    font-size: 1.5em;
  }
}

.text {
  color: #fff;
  position: relative;
  top: 50%;
  left: 10%;
  background-color: #000;
}

a.about:hover {
  color: #2ecc71;
}

.aboutText {
  background-color: #000;
  width: 100%;
  height: 100vh;
  background-size: cover;
  opacity: 0.5;
  position: relative;
}

.hide {
  display: none;
}

.aboutText--open {
  background-color: #000;
  width: 100%;
  height: 100vh;
  background-size: cover;
  opacity: 0.5;
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Doplniť neskôr">
</head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">

<body>
  <div class="aboutText hide">
    <div class="text">
      <p>sssss</p>
    </div>
  </div>
  <div id="particles-js">
    <h1 class="main">Text</h1>
  </div>
  <span class="home">Home</span>
  <a href="#" class="about">About</a>

  <div id="about">

  </div>
  <div id="portfolio"></div>
  <div id="contact"></div>
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="js/particles.js"></script>
  <script src="app.js"></script>


</body>

</html>

点击时div下移

1 个答案: