【CSS系列】網頁頭部進度條方式一
阿新 • • 發佈：2017-08-06
absolute ati ffffff loading script 進度 header type pro
<!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>
【CSS系列】網頁頭部進度條方式一