今天在回答一个网友的问题时，学习了一下进度条的制作，其实也简单，是用jQuery的animate来实现的。
这是animate的的文档，进度条里主要用到了step和complete两个属性：http://jquery.bootcss.com/animate/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.progress{width: 100%; height: 16px; background-color: #CCC; position: relative;}
.progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;}
.progress .num{position: absolute; left: 50%; margin-left: -10px;}
</style>
</head>
<body>
<div class="content">
<div class="progress" id="process">
<div class="ibar" id="ibar"></div>
<div class="num" id="num">0%</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script language = "JavaScript">
$(function(){
$("#ibar").animate(
{"width":"100%"},
{
duration:3000,
easing:"linear",
step: function(now, fx){
$("#num").html(parseInt(now)+"%");
},
complete:function(){
$("#process").fadeOut();
}
}
)
})
</script>
</html>
时间： 2024-08-05 11:21:03