基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果



HTML结构:

1. <ul class="vote-box-list clearfix" id="appVoteBox">
   
2. <li class="vl-item" id="voteItem0" >
   
3. <div class="vote-item-wrap">
   
4. <h4>A：</h4>
   
5. <p class="litem"><em class=vleft></em><span></span><em class=vright></em>
   
6. </p><span class=vnum>79（2%）</span>
   
7. </div>
   
8. <li class="vl-item" id="voteItem1" >
   
9. <div class="vote-item-wrap">
   
10. <h4>B：</h4>
    
11. <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
    
12. <span class=vnum>1986（61%）</span>
    
13. </div>
    
14. <li class="vl-item" id="voteItem2">
    
15. <div class="vote-item-wrap">
    
16. <h4>C：</h4>
    
17. <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
    
18. <span class=vnum>1153（36%）</span>
    
19. </div>
    
20. <li class="vl-item" id="voteItem3" >
    
21. <div class="vote-item-wrap">
    
22. <h4>D：</h4>
    
23. <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
    
24. <span class=vnum>415（13%）</span>
    
25. </div>
    
26. <li class="vl-item" id="voteItem4" >
    
27. <div class="vote-item-wrap">
    
28. <h4>5：</h4>
    
29. <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p>
    
30. <span class=vnum>89（3%）</span>
    
31. </div>
    
32. </ul>

复制代码

jquery代码:

1. var Vote = {};
   
2. Vote.ListShow = (function() {
   
3. var b, c, g, j;
   
4. function a(k) {
   
5. b = k.id;
   
6. g = k.percent;
   
7. j = k.width;
   
8. styleData = h();
   
9. bindItems = d()
   
10. }
    
11. function d() {
    
12. var o = [];
    
13. m = $(".vote-item-wrap");
    
14. for (var n = 0, k = m.length; n < k; n++) {
    
15. o.push(m[n].children[1]);
    
16. }
    
17. return o
    
18. }
    
19. function h() {
    
20. var o = [];
    
21. var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"];
    
22. var q = n.slice();
    
23. for (var p = 0, l = g.length; p < l; p++) {
    
24. var k = Math.floor(Math.random() * q.length);
    
25. o.push(q[k]);
    
26. q.splice(k, 1);
    
27. if (q.length == 0) {
    
28. q = n.slice()
    
29. }
    
30. }
    
31. return o
    
32. }
    
33. function f(l, k) {
    
34. $(l.children[0]).css("background-color", k.color);
    
35. $(l.children[1]).css({'background-color': k.color,'width': '0px'});
    
36. $(l.children[2]).css("background-color", k.color);
    
37. }
    
38. function i() {
    
39. var n = [];
    
40. var l = [];
    
41. for (var m = 0, k = g.length; m < k; m++) {
    
42. f(bindItems[m], {color: styleData[m]});
    
43. n.push(bindItems[m].children[1]);
    
44. l.push(Math.round(g[m] * j))
    
45. }
    
46. e(n, 0, l, c)
    
47. }
    
48. function e(p, o, l, n) {
    
49. for (var r = 0, q = g.length; r < q; r++) {
    
50. $(p[r]).animate({width: l[r]},"slow");
    
51. }
    
52. }
    
53. return {init: a,go: i}
    
54. })();

复制代码

调用方法:

1. Vote.ListShow.init({
   
2. id: 'appVoteBox',
   
3. percent: [
   
4. 0.02, 0.61, 0.36, 0.13, 0.03],
   
5. width: 183 - 2
   
6. });
   
7. Vote.ListShow.go(); 样式:body {
   
8. font: 12px/1.5 arial,宋体;
   
9. }
   
10. html, body {
    
11. color: #333333;
    
12. }
    
13. li.vl-item {
    
14. float: left;
    
15. width: 100%;
    
16. }
    
17. .app-vote ul, .app-vote ol, .app-vote li, .app-vote dl, .app-vote dt, .app-vote dd, .app-vote form, .app-vote p, .app-vote h1, .app-vote h2, .app-vote h3 {
    
18. margin: 0;
    
19. padding: 0;
    
20. }
    
21. .app-vote em {
    
22. font-style: normal;
    
23. }
    
24. .app-vote ul, .app-vote ol {
    
25. list-style: none outside none;
    
26. }
    
27. .vote-box-list {
    
28. float: left;
    
29. width: 586px;
    
30. }
    
31. #appVote .vote-action {
    
32. margin-top: 30px;
    
33. width: 60px;
    
34. }
    
35. .vote-box-list li {
    
36. list-style: none outside none;
    
37. }
    
38. .vote-box-list li .vote-item-wrap {
    
39. padding: 5px 0;
    
40. }
    
41. .vote-box-list li.over {
    
42. background-color: #FFE57F;
    
43. }
    
44. .vote-box-list li h4 {
    
45. font-size: 1em;
    
46. font-weight: normal;
    
47. overflow: hidden;
    
48. text-align: right;
    
49. width: 260px;
    
50. word-wrap: break-word;
    
51. }
    
52. .vote-box-list li .litem {
    
53. background: none repeat scroll 0 0 #EFEFEF;
    
54. border: 1px solid #E2E2E2;
    
55. height: 14px;
    
56. width: 183px;
    
57. }
    
58. .vote-box-list li p, .vote-box-list li h4 {
    
59. float: left;
    
60. margin: 0;
    
61. padding: 0;
    
62. }
    
63. .vote-box-list li p input {
    
64. float: left;
    
65. margin: 0;
    
66. }
    
67. .vote-box-list li em, .vote-box-list li span {
    
68. float: left;
    
69. height: 14px;
    
70. overflow: hidden;
    
71. }
    
72. .vote-box-list li .vleft, .vote-box-list li .right {
    
73. width: 2px;
    
74. }
    
75. .vnum {
    
76. text-indent: 5px;
    
77. width: 90px;
    
78. }
    
79. ul.vote-ctrl-act-sep {
    
80. margin: 5px 0;
    
81. overflow: hidden;
    
82. }
    
83. ul.vote-ctrl-act-sep li {
    
84. border-bottom: medium none;
    
85. border-right: 1px solid #000000;
    
86. float: right;
    
87. margin-right: -1px;
    
88. padding: 0 10px;
    
89. }
    
90. #appVoteAddForm dt {
    
91. clear: left;
    
92. text-align: right;
    
93. width: 150px;
    
94. }
    
95. #appVoteAddForm .txt {
    
96. width: 400px;
    
97. }
    
98. #appVoteAddForm .vote {
    
99. height: 300px;
    
100. width: 400px;
     
101. }
     
102. #appVoteAddForm .tip {
     
103. color: #6B6B6B;
     
104. }
     
105. #appVoteAddForm .back_block {
     
106. margin: 6px 0;
     
107. width: 550px;
     
108. }
     
109. #text_vote_area p.m {
     
110. color: #355E9D;
     
111. }
     
112. #text_vote_area p.t {
     
113. color: #999999;
     
114. }

复制代码

完毕!