Question

小动画图片（2 .gif / jpeg图片）在屏幕中央持续10秒。然后两张图片都会自动消失 < / p>

之后消息应显示“欢迎使用我的网站” 10秒。然后消息应自动消失

最后，我想显示我的网页。

  <!doctype html>
    <html lang="en">

    <head>
          <meta charset="utf-8"/>
          <title>PreLoadMe</title>


          <!-- Stylesheet -->
          <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, print"/>

    </head>

    <body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <!-- Your Website Content -->
    <div>This is your website content</div>

    <!-- jQuery Plugin -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

    <!-- Preloader -->
    <script type="text/javascript">
        //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
                $('#status').fadeOut(); // will first fade out the loading animation
                $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(350).css({'overflow':'visible'});
            })
        //]]>
    </script> 

    </body>
    </html>


    My css file :-

    @charset "utf-8";
    body {
        overflow: hidden;
    }

    /* Preloader */
    #preloader {
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#fff; /* change if the mask should be a color other than white */
        z-index:99; /* makes sure it stays on top */
    }

    #status {
        width:200px;
        height:200px;
        position:absolute;
        left:50%; /* centers the loading animation horizontally on the screen */
        top:50%; /* centers the loading animation vertically on the screen */
        background-image:url(../img/status.gif); /* path to your loading animation */
        background-repeat:no-repeat;
        background-position:center;
        margin:-100px 0 0 -100px; /* is width and height divided by two */
    }

TIA

Answer 1

所以你可以通过几种不同的方式做到这一点，我想我会向你展示jquery方式和css动画方式。这里有小提琴，展示了我用来实现这种效果的两种方式。

这是Jquery Way的小提琴：Preloader Jquery Fiddle

以下是CSS动画方式的小提琴：Css Animations Fiddle

我开始使用以下html作为两个小提琴：

<div class="preloader">
  <span class="first">
    <img src="https://placehold.it/100x100">
    <img src="https://placehold.it/100x100">
  </span>
  <span class="second">Welcome to our site</span>
</div>

然后对于jquery小提琴我使用了以下CSS和jquery代码：

CSS：

.preloader{
  position: fixed;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: 99999999;
  color: #fff;
  text-align: center;
}
.preloader img{
  display: block;
  margin-bottom: 5px;
}
.preloader span{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.preloader span.second{
  display: none;
}

Jquery的：

$(document).ready(function(){
  $('.preloader span.first').delay(10000).fadeOut('slow', function(){ 
    $('.preloader span.first').hide();
  });
  $('.preloader span.second').delay(11000).fadeIn('slow');
  setTimeout(function(){ 
    $('.preloader').fadeOut('slow', function() {
      $('.preloader').remove();
    });
  }, 20000);
});

对于Css Animations Way，我使用了以下Css和Jquery代码：

的CSS：

.preloader{
  position: fixed;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: 99999999;
  color: #fff;
  text-align: center;
}
.preloader img{
  display: block;
  margin-bottom: 5px;
}
.preloader span{
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: fade-out 10s linear; /* Safari 4+ */
  -moz-animation:    fade-out 10s linear; /* Fx 5+ */
  -o-animation:      fade-out 10s linear; /* Opera 12+ */
  animation:         fade-out 10s linear; /* IE 10+, Fx 29+ */
}
.preloader span.second{
  animation-delay: 10s;
}
@-webkit-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

Jquery的：

$(document).ready(function(){
  setTimeout(function(){ 
    $('.preloader').fadeOut('slow', function() {
      $('.preloader').remove();
    });
  }, 20000);
});

希望这有助于我想到我会给你几个不同的选择，你想如何实现这一目标。 Jquery方式可能拥有最多的浏览器支持，但大多数浏览器现在支持css动画，所以这也是一个非常好的选择。

使用jQuery和CSS加载网页时显示元素

1 个答案: