固定在顶部的进度条

来源：互联网发布：linux java home 配置编辑：程序博客网时间：2024/05/21 22:48
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title>固定在顶部的进度条</title>        <script src="js/jquery-3.1.0.min.js"></script>        <style>            .loading{                width: 100%;;height: 100%;background: #fff;position: fixed;top: 0;left: 0;z-index: 100;            }            .loading .pic{width: 0%; height: 5px;background: darkred;position: absolute;top: 0;left: 0;}        </style>    </head>    <body>        <div class="loading">            <div class="pic"></div>        </div>        <header>            <img src="http://img.tuku.cn/file_big/201503/d8905515d1c046aeba51025f0ea842f0.jpg" />        <img src="http://tupian.enterdesk.com/2013/mxy/12/11/4/3.jpg" />        </header>        <script type="text/javascript">            $(".loading .pic").animate({"width":"10%"},100);        </script>        <section class="banner">            <img src="http://tupian.enterdesk.com/2013/mxy/12/28/1/3.jpg" />        </section>        <script type="text/javascript">            $(".loading .pic").animate({"width":"30%"},100);        </script>        <section class="nav">            <img src="http://pic9.nipic.com/20100818/5462876_150854046500_2.jpg" />        <img src="http://pic10.nipic.com/20100929/4308872_150108084472_2.jpg" />        </section>        <script type="text/javascript">            $(".loading .pic").animate({"width":"50%"},100);        </script>        <section class="abourt">            <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg" />        <img src="http://tupian.enterdesk.com/2014/mxy/02/11/4/4.jpg" />        </section>        <script type="text/javascript">            $(".loading .pic").animate({"width":"70%"},100);        </script>        <section class="pro">            <img src="http://img1.imgtn.bdimg.com/it/u=2418226610,2868081468&fm=214&gp=0.jpg" />        </section>        <script type="text/javascript">            $(".loading .pic").animate({"width":"100%"},100,function(){                $(".loading").fadeOut();            });        </script>    </body></html>
原理：不同位置加载进度条的width的百分数
阅读全文
0 0