简单的进度条演示

最新推荐文章于 2024-09-14 19:44:09 发布

weixin_30480583

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xumengxuan/p/4119924.html

版权

　　今天在回答一个网友的问题时，学习了一下进度条的制作，其实也简单，是用jQuery的animate来实现的。

　　这是animate的的文档，进度条里主要用到了step和complete两个属性：http://jquery.bootcss.com/animate/

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         *{margin: 0; padding: 0;}
 8         .progress{width: 100%; height: 16px; background-color: #CCC; position: relative;}
 9         .progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;}
10         .progress .num{position: absolute; left: 50%; margin-left: -10px;}
11     </style>
12 </head>
13 <body>
14     <div class="content">
15         <div class="progress" id="process">
16             <div class="ibar" id="ibar"></div>
17             <div class="num" id="num">0%</div>
18         </div>
19     </div>
20 </body>
21 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
22 <script language = "JavaScript">
23 $(function(){
24     $("#ibar").animate(
25         {"width":"100%"},
26         {
27             duration:3000,
28             easing:"linear",
29             step: function(now, fx){
30                 $("#num").html(parseInt(now)+"%");
31             },
32             complete:function(){
33                 $("#process").fadeOut();
34             }
35         }
36     )
37 })
38 </script>
39 </html>