进度条（一）
百里涛
用定时器进行控制进度条：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器进度条</title>
<script src="js/jquery-1.7.2.min.js"></script>
<style>
html,body{
height:100%;
}
*{
margin:0;
padding:0;
}
img{
display:block;
width:80%;
height:auto;
margin:0 auto;
}
.loading{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#fff;
}
.pic{
width:64px;
height:64px;
background:url(images/760.gif);
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
</style>
<script>
$(function(){
var load= '<div class="loading"><div class="pic"></div></div>';
//定义一个变量
$('body').append(load);
//将变量插入到body中去
setInterval(function(){
//淡出
$('.loading').fadeOut();
},3000)
})
</script>
</head>
<body>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1510670735&di=6ab105cb4c836eaeb26783d65c081797&src=http://i.epetbar.com/2015-01/22/ios1421939751_4.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853542&di=08c4fa2808bd943a3e377f866b832a68&imgtype=0&src=http%3A%2F%2Fwww.ziyingcat.com%2Fup%2F1558939181.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853542&di=08e2e77b86b67b9e6d2649b5ede18201&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140321%2F20140321104024-984412882.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853537&di=16272e21c9083f42cb94efb6ef6521ca&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D622e37fb3cd12f2eda08a62327abbf17%2Fb8389b504fc2d5629cf786c1ed1190ef76c66c1a.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853531&di=a46cb067bdba37434053e1e5c4f87a20&imgtype=0&src=http%3A%2F%2Fimg2w.pclady.com.cn%2Fpclady%2F1008%2F09%2Fspcgroup%2Fwidth_640%2Cqua_60%2F588642_1.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510680853523&di=5a7f6d2753f06b62754052c46c43c7a4&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D28d72ecfdf39b60059c307f481395f5f%2F3bf33a87e950352afb4508245943fbf2b2118bf1.jpg">
</body>
</html>
类似资料：