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 >
35 <div >
36 </div>
37
38 <button >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
- 上一篇 »JQuery表单验证插件
- 下一篇 »25个可遇不可求的jQuery插件
