【CSS系列】网页头部进度条方式一 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部进度条</title>
  <style type="text/css">
    .loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;
      z-index: 100;
      background: #FFFFFF;
    }
    .loading .pic{
      height: 5px;
      position: absolute;
      top:0;
      left:0;
      background: #F33;
    }
  </style>
  <script src="../js/jquery-3.2.1.js"></script>

</head>
<body>
<div class="loading">
  <div class="pic"></div>
</div>
<header>
 <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4174868146,2956166581&fm=26&gp=0.jpg">
  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2976427166,2178524819&fm=26&gp=0.jpg">
</header>
<script type="text/javascript">
  $(".loading .pic").animate({width:"10%"},100)
</script>
<section class="banner">
  <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg">
  <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2227804654,860253351&fm=26&gp=0.jpg">
</section>
<script type="text/javascript">
  $(".loading .pic").animate({width:"30%"},100)
</script>
<section class="about">
  <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848479042,2603873849&fm=26&gp=0.jpg">
  <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1223109904,763334928&fm=26&gp=0.jpg">
</section>
<script type="text/javascript">
  $(".loading .pic").animate({width:"50%"},100)
</script>
<section class="pro">
  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3280010440,2340064&fm=26&gp=0.jpg">
</section>
<script type="text/javascript">
  $(".loading .pic").animate({width:"80%"},100)
</script>
<section class="news">
  <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2687972484,527558523&fm=26&gp=0.jpg">
</section>
<script type="text/javascript">
  $(".loading .pic").animate({width:"95%"},100)
</script>
<footer>
  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1173737556,2699518622&fm=26&gp=0.jpg">
</footer>
<script type="text/javascript">
  $(".loading .pic").animate({width:"100%"},100,function () {
    $(".loading").fadeOut();
  })
</script>
</body>
</html>

 

posted @ 2017-08-06 17:16  霓裳梦竹  阅读(431)  评论(0)  编辑  收藏  举报