標籤:header 3.2 query position static har char jquery jpg
<!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系列】網頁頭部進度條方式一