标签：style blog http io ar color os sp java
今天在回答一个网友的问题时，学习了一下进度条的制作，其实也简单，是用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>
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/xumengxuan/p/4119924.html
