常用的网页加载进度条之【定位在头部的进度条】

来源：互联网发布：淘宝怎么设置员工旺旺编辑：程序博客网时间：2024/06/06 02:46

之前展示的时候已经给大家看过这个效果了，比如说hao123，那么当我们进入页面的时候就会有一个从左到右的线条。

那么我们就来介绍一下这个效果。其实这个方法是非常简单的，主要是采用页面从上到下逐次加载的顺序结构而做成的一个程序。我们来看一下这个结构的具体做法：

<!doctype html><html>    <head>        <meta charset="UTF-8">        <title>进度条4</title>        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>        <style>            .loading {                width: 100%;                height: 100%;                position: fixed;                top: 0;                left: 0;                z-index: 100;                background-color: #fff;            }            .loading .pic {                /*页面开始加载的时候上方显示的一条线，默认宽度为0*/                width: 0%;                height: 5px;                position: absolute;                top: 0;                bottom: 0;                left: 0;                right: 0;                background: #f33;            }        </style>    </head>    <body>        <div class="loading">            <div class="pic"></div>        </div>        <header>            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">        </header>        <!--设置页面头部加载完成是线条的宽度为10%，以此类推，当页面全部加载完成时，上方线条的宽度为100%-->        <script>            $(".loading .pic").animate({width: "10%"}, 100);;        </script>        <section class="banner">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">        </section>        <script>            $(".loading .pic").animate({width: "30%"}, 100);;        </script>        <section class="about">            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">        </section>        <script>            $(".loading .pic").animate({width: "50%"}, 100);;        </script>        <section class="pro">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">        </section>        <script>            $(".loading .pic").animate({width: "70%"}, 100);;        </script>        <section class="news">            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">        </section>        <script>            $(".loading .pic").animate({width: "90%"}, 100);;        </script>        <footer>            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">        </footer>        <!--当线条的宽度显示为100%时，将红色线条隐藏，显示内容-->        <script>            $(".loading .pic").animate({width: "100%"}, 100, function(){                $(".loading").fadeOut();            });;        </script>        <!--但是这个方法有一个问题，就是虽然我们看见内容已经加载完了，但是这个只是把图片的数据载入进来，有的图片是从上到下慢慢加载的，这个是不影响页面，因此这个方法也可以使用，这个就是采用了从上到下的执行顺序的特效来完成这个效果。如果你想让效果更加的流畅，可以把走到每一个模块线条的样式拆分的细一点-->    </body></html>

希望这个大家通过这个方法可以完成这样一个简单的进度条。这个方法不是在什么页面中必须要用的，根据自己不同的情况而定就可以了。

阅读全文

0 0