進(jìn)度條的實(shí)現(xiàn)
學(xué)習(xí)自： 這個(gè)網(wǎng)站
原理：
在 一個(gè)頁(yè)面中一般分為:header,content,sidebar,footer搂誉，每次我們?cè)L問頁(yè)面時(shí)捍壤，瀏覽器發(fā)送請(qǐng)求梁厉，肯定要花費(fèi)一定的時(shí)間的懊渡，以進(jìn)度條的寬度來實(shí)現(xiàn)加載時(shí)間的變化
在header時(shí)冠句，讓進(jìn)度條顯示寬度，10%,
加載content時(shí)织咧，讓進(jìn)度條顯示一定的寬度胀葱，50%,
sidebar 70%，
footer 100%
就是這樣,動(dòng)畫函數(shù)使用jquery的animate()笙蒙，
最后抵屿，頁(yè)面加載完成，使用fadeout()淡出 讓進(jìn)度條消失就可以了.
html 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>進(jìn)度條</title>
</head>
<body>
<div class="loading"></div>
<header>header</header>
<div class="loading"></div>
<div class="content">some data</div>
<div class="loading"></div>
<div class="sidebar"></div>
<div class="loading"></div>
<footer><footer>
</body>
</html>
然后給每個(gè)loading div 加樣式
.loading {
background: #FF6100;
height: 5px;
position: fixed;
top: 0;
z-index: 99999;}
引入 jquery
<script src="jquery-2.1.4.min.js"></script>
加上 jquery代碼
$ (".loading").animate ({"width": "10%"}, 50);
$ (".loading").animate ({"width": "50%"}, 50);
$ (".loading").animate ({"width": "70%"}, 50);
$ (".loading").animate ({"width": "100%"}, 50);
$ (function () {
$(".loading").fadeOut();
});
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>進(jìn)度條</title>
<style>
.loading {
background: #FF6100;
height: 5px;
position: fixed;
top: 0;
z-index: 99999;
}
</style>
</head>
<body>
<div class="loading"></div>
<header>header</header>
<div class="loading"></div>
<div class="content">some data</div>
<div class="loading"></div>
<div class="sidebar"></div>
<div class="loading"></div>
<footer><footer>
<script src="jquery.js"></script>
<script>
$ (".loading").animate ({"width": "10%"}, 50);
$ (".loading").animate ({"width": "50%"}, 50);
$ (".loading").animate ({"width": "70%"}, 50);
$ (".loading").animate ({"width": "100%"}, 50);
$ (function () {
$(".loading").fadeOut();
});
</script>
</body>
</html>
