進度條製作
一、思路分析
對於 固定在頂部的 loading 動畫，我們採用的方式 動態改變標籤的寬度 來實現動畫效果，在頁面加載一部分後，改變寬度，當加載完畢時，隱藏對應的標籤。
二、頁面佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>進度條動畫製作</title>
<link rel="stylesheet" type="text/css" href="css/index3.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="loading">
<div class="picture"></div>
</div>
<!-- 注意：以下結構僅僅是爲了演示頁面而已 -->
<div class="container">
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg">
</div>
<div class="item">
<img src="http://img2.imgtn.bdimg.com/it/u=2398464402,4254570216&fm=11&gp=0.jpg">
</div>
<div class="item">
<img src="http://i0.hdslb.com/bfs/article/669b74844e47c4ca9774aad43dc62b0d879fbcd6.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg">
</div>
</div>
<script type="text/javascript">
$(".loading .picture").animate({
width: "20%"
}, 100);
</script>
<div class="container">
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=228361023,682353921&fm=26&gp=0.jpg">
</div>
<div class="item">
<img src="http://img5.imgtn.bdimg.com/it/u=550633143,1906543664&fm=11&gp=0.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg">
</div>
</div>
<script type="text/javascript">
$(".loading .picture").animate({
width: "40%"
}, 100);
</script>
<div class="container">
<div class="item">
<img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg">
</div>
</div>
<script type="text/javascript">
$(".loading .picture").animate({
width: "60%"
}, 100);
</script>
<div class="container">
<div class="item">
<img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg">
</div>
<div class="item">
<img src="http://g.hiphotos.baidu.com/zhidao/pic/item/6a600c338744ebf814066acedbf9d72a6159a7cf.jpg">
</div>
</div>
<script type="text/javascript">
$(".loading .picture").animate({
width: "80%"
}, 100);
</script>
<div class="container">
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg">
</div>
<div class="item">
<img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg">
</div>
<div class="item">
<img src="http://pic9.nipic.com/20100825/668573_135507057246_2.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg">
</div>
</div>
<script type="text/javascript">
$(".loading .picture").animate({
width: "100%"
}, 100, function() {
$('.loading').fadeOut();
})
</script>
</body>
</html>
三、樣式
* {
margin: 0;
padding: 0;
}
/* 加載動畫樣式start */
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #ffffff;
}
.loading .picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 6px;
background: blue;
border-radius: 3px;
}
/* 加載動畫樣式end */
/* 頁面樣式start */
.container {
width: 1200px;
margin: 10px auto;
border: 1px solid red;
padding: 20px;
overflow: hidden;
border-radius: 10px;
}
.container .item {
float: left;
margin-bottom: 10px;
}
.container img {
font-size: 0;
vertical-align: middle;
width: 300px;
height: 200px;
}
/* 頁面樣式end */
四、溫馨提示
每當頁面加載一部分，便改變 loading 的寬度，加載完畢後，隱藏標籤。
// 加載到80%
<script type="text/javascript">
$(".loading .picture").animate({ width: "80%" }, 100);
</script>
// 加載完畢
<script type="text/javascript">
$(".loading .picture").animate({ width: "100%"}, 100, function() {
$('.loading').fadeOut();
})
</script>
五、效果圖
