个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:35:33 25 4
gpt4 key购买 nike

小动画图像(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

最佳答案

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

这是 Jquery Way 的 fiddle :Preloader Jquery Fiddle

这是 CSS 动画方式的 fiddle :Css Animations Fiddle

我从两个 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 fiddle ，我使用了以下 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;
}

J查询:

$(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 动画方式，我使用了以下 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; }
}

J查询:

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

希望这对您有所帮助 我只是想我会为您提供几个不同的选项来帮助您实现这一目标。 Jquery 方式可能会得到最多的浏览器支持，但现在大多数浏览器都支持 css 动画，所以这也是一个很好的选择。

关于jquery - 使用 jQuery 和 CSS 在加载网页时显示元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36167540/

25 4 0
文章推荐： php - 谷歌云计算引擎 - 无法在 php 文件中使用 mysqli 函数
文章推荐： java - 在 Java 中将 XML 转换为没有属性的 JSON 的简洁有效的方法是什么？
文章推荐： Android 外壳 chown u0_49
文章推荐： python - Beautifulsoup:如果标签或元素未知，如何查找字符串？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com