Question

我希望直接进入网站时显示徽标叠加层div，它将覆盖全屏，同时显示我的徽标。然后，在几秒钟后显示该网站，并使覆盖图消失。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <style>
    #overlay {
      display: none;
      background: dodgerblue;
      width: 100%;
    }
    
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>

  <script>
    $('#overlay').fadeIn('fast').delay(1000).fadeOut('fast');
  </script>
</head>

<body>
  <div id="logo-overlay">Logo here</div>
</body>

</html>

Answer 1

//$( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

$(document).ready(function() {
  $('#overlay').fadeIn('fast').delay(1000).fadeOut('fast');
});

#overlay {
  position: absolute; // will pull the element out of the document flow
  display: none;
  background: dodgerblue;
  width: 100%;
  height: 100vh; // will stretch it to the full height of the screen
}

html,
body {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay">Logo here</div>
My site

我希望直接进入网站时显示徽标叠加层div

1 个答案: