首页 > 代码库 > 【CSS系列】网页头部进度条方式一
【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=http://www.mamicode.com/"../js/jquery-3.2.1.js"></script> </head> <body> <div class="loading"> <div class="pic"></div> </div> <header> <img src=http://www.mamicode.com/"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4174868146,2956166581&fm=26&gp=0.jpg"> <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1203727489,1880869354&fm=26&gp=0.jpg"> <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3848479042,2603873849&fm=26&gp=0.jpg"> <img src=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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>
【CSS系列】网页头部进度条方式一
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。