Question

我已经创建了一个预加载器，除了它不复存在之外它还可以作为覆盖页面上所有内容的不可见层。因此，无法点击链接等内容。如何解决这个问题，但仍保留动画？

<body>
  <div id="preloader_wrap">
    <div class="section" id="right_sect">

    </div>

    <div class="section" id="left_sect">

    </div>

    <div id="content">
      <div id="img">

      </div>

      <div id="loading_bar">
        <div></div>
      </div>
    </div>
  </div>

  <header>
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </header>
</body>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

css：

*{
  margin: 0; 
  padding: 0;
}

body{
  background-color: #666666;
  width: 100%;
}

#preloader_wrap{
  z-index: 1010;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.section{
  position: fixed;
  width: 50%; 
  height: 100%;
  background-color: black;
  top: 0;
  transition: width 1s;
}

#left_sect{
  left: 0;
}

#right_sect{
  right: 0;
}

#content{
  position: relative;
  margin: 100px auto 0 auto;
  width: 600px;
  transition: all 1s;
}

#img{
  height: 200px;
  width: 300px;
  background-color: red;
  margin: 0 auto;
}

#loading_bar{
  height: 50px;
  width: 50px;
  margin: 30px auto;
}

#loading_bar div{
  height: 100%;
  width: 100%;
  border-bottom: 4px solid #ffffff;
  border-left: 4px solid transparent;
  border-radius: 100%;
  animation: spin 0.9s linear infinite;
  -webkit-animation: spin 0.9s linear infinite;
  -moz-animation: spin 0.9s linear infinite;
  -o-animation: spin 0.9s linear infinite;
}

@keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

body.loaded .section{
  width: 0;
}

body.loaded #content{
  opacity: 0;
}

header{
  width: 100%;
  height: 75px;
  background-color: blue;
  position: fixed;
  top: 0;
  z-index: 1000;
}

ul{
  list-style-type: none;
  margin: 10px auto;
  width: 300px;
}

ul li{
  display: inline-block;
  font-size: 40px;
}

ul li a{
  color: white;
}

JS：

$(document).ready(function() {

    setTimeout(function(){
        $('body').addClass('loaded');
    }, 2000);

});

Answer 1

将您的脚本更改为此...

$(document).ready(function() {

    setTimeout(function(){
        $('body').addClass('loaded');
        $('#preloader_wrap').remove();
    }, 2000);

});

一旦页面加载，这将完全删除图层。

Answer 2

您的加载程序区域的z-index为1010，它将其放在其他所有内容之前，您不会删除它，也不会删除元素本身。因为它的宽度和高度是100％，它会阻止整个页面。

您可以使用CSS修复此问题。你已经这样做了：

body.loaded .section{
  width:0;
}

body.loaded #content{
  opacity: 0;
}

然而，这只隐藏了装载机的内部部件，而不是整个部件。这样做：

body.loaded #preloader_wrap {
  display:none;
}

参见工作示例：https://codepen.io/anon/pen/ZKbJEj

Answer 3

它基本上是preloader_wrap 上的 z-index问题。 您可以在加载加载程序后使用$("#preloader_wrap").css("z-index","-1")

修复z-index

＆＃13;
＆＃13;
$(document).ready(function() { setTimeout(function() { $('body').addClass('loaded'); $("#preloader_wrap").css("z-index", "-1"); }, 2000); });
＆＃13;
* { margin: 0; padding: 0; } body { background-color: #666666; width: 100%; } #preloader_wrap { z-index: 1010; position: fixed; top: 0; left: 0; right: 0; } .section { position: fixed; width: 50%; height: 100%; background-color: black; top: 0; transition: width 1s; } #left_sect { left: 0; } #right_sect { right: 0; } #content { position: relative; margin: 100px auto 0 auto; width: 600px; transition: all 1s; } #img { height: 200px; width: 300px; background-color: red; margin: 0 auto; } #loading_bar { height: 50px; width: 50px; margin: 30px auto; } #loading_bar div { height: 100%; width: 100%; border-bottom: 4px solid #ffffff; border-left: 4px solid transparent; border-radius: 100%; animation: spin 0.9s linear infinite; -webkit-animation: spin 0.9s linear infinite; -moz-animation: spin 0.9s linear infinite; -o-animation: spin 0.9s linear infinite; } @keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } body.loaded .section { width: 0; } body.loaded #content { opacity: 0; } header { width: 100%; height: 75px; background-color: blue; position: fixed; top: 0; z-index: 1000; } ul { list-style-type: none; margin: 10px auto; width: 300px; } ul li { display: inline-block; font-size: 40px; } ul li a { color: white; }
＆＃13;
<body> <div id="preloader_wrap"> <div class="section" id="right_sect"> sdsadsadsa </div> <div class="section" id="left_sect"> dasdsadsad </div> <div id="content"> <div id="img"> </div> <div id="loading_bar"> <div></div> </div> </div> </div> <header> <ul> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </header> </body> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 4

我并不太清楚你试图隐藏你的标记的哪些部分，但假设它是preloader_wrap元素中的所有内容（如果不是，我会将该标记移到它之外）），你遇到的问题是这个元素堆叠在其他元素之上，因为它的z-index更高。

最简单的解决方法是添加以下CSS：

body.loaded #preloader_wrap {
  display: none;
}

我可以看到这会破坏你的动画，你可以考虑以下内容：

body.loaded #content{
  opacity: 0;
  display: none;
}

然而，考虑到我们不会在这里隐藏包装器，这感觉有点像黑客，因此如果它中的任何其他东西给它高度它仍然会覆盖页面的一部分。

我会考虑重构你的标记/ CSS过渡，以便以更一致的方式为你工作。

预加载器覆盖具有不可见层的页面

4 个答案: