jquery 插件 percentageloader

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 5     <script src="src/jquery.percentageloader-0.1.js"></script>
 6     <link rel="stylesheet" href="src/jquery.percentageloader-0.1.css"></script>
 7 
 8     <style>
 9       body {
10         margin: 0px;
11         padding: 0px;
12       }
13       
14       #topLoader {
15         width: 256px;
16         height: 256px;
17         margin-bottom: 32px;
18       }
19       
20       #container {
21         width: 940px;
22         padding: 10px;
23         margin-left: auto;
24         margin-right: auto;
25       }
26       
27       #animateButton {
28         width: 256px;
29       }
30     </style>
31   
32   </head>
33   <body>
34     <div id="container">
35       <div id="topLoader">      
36       </div>
37       
38       <button id="animateButton">Animate Loader</button>
39       
40        <script>
41         $(function() {
42           var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : function(val) {
43               $topLoader.setValue(Math.round(val * 100.0));
44             }});
45 
46           var topLoaderRunning = false;
47           $("#animateButton").click(function() {
48             if (topLoaderRunning) {
49               return;
50             }
51             topLoaderRunning = true;
52             $topLoader.setProgress(0);
53             $topLoader.setValue('0kb');
54             var kb = 0;
55             var totalKb = 999;
56             
57             var animateFunc = function() {
58               kb += 17;
59               $topLoader.setProgress(kb / totalKb);
60               $topLoader.setValue(kb.toString() + 'kb');
61               
62               if (kb < totalKb) {
63                 setTimeout(animateFunc, 25);
64               } else {
65                 topLoaderRunning = false;
66               }
67             }
68             
69             setTimeout(animateFunc, 25);
70             
71           });
72         });      
73       </script>
74     </div>
75      
76   </body>
77 </html>
项目主页: https://bitbucket.org/Better2Web/jquery.percentageloader
posted on 2012-10-31 22:18 NeverGiveUp_ZONE 阅读(590) 评论(0) 编辑收藏举报