Jquery-based multi-color percentage dynamic progress bar voting effect display effect implementation code _ jquery

Based on jquery's colorful percentage dynamic progress bar code for displaying the voting effect. For more information about jquery, see. Create a beautiful, dynamic, and friendly display of random color voting percentage

HTML structure:

The Code is as follows:

• 
  

  
  A:
  

  
  

  79 (2%)
  
  
  
• 
  

  
  B:
  

  
  1986 (61%)
  
  
  
• 
  

  
  C:
  

  
  1153 (36%)
  
  
  
• 
  

  
  D:
  

  
  415 (13%)
  
  
  
• 
  

  
  5:
  

  
  89 (3%)
  
  
  

Jquery code:

The Code is as follows:

Var Vote = {};
Vote. ListShow = (function (){
Var B, c, g, j;
Function a (k ){
B = k. id;
G = k. percent;
J = k. width;
StyleData = h ();
BindItems = d ()
}
Function d (){
Var o = [];
M = $ (". vote-item-wrap ");
For (var n = 0, k = m. length; n <k; n ++ ){
O. push (m [n]. children [1]);
}
Return o
}
Function h (){
Var o = [];
Var n = ["# 5dbc5b", "#6c81b6", "#9eb5f0", "# a5cbd6", "# aee7f8", "# c2f263", "# d843b3 ", "# d8e929", "# e58652", "# e7ab6d", "# ee335f", "# fbe096", "# ffc535"];
Var q = n. slice ();
For (var p = 0, l = g. length; p <l; p ++ ){
Var k = Math. floor (Math. random () * q. length );
O. push (q [k]);
Q. splice (k, 1 );
If (q. length = 0 ){
Q = n. slice ()
}
}
Return o
}
Function f (l, k ){
Certificate (l.children%0%%.css ("background-color", k. color );
Certificate (l.children1_1).css ({'background-color': k. color, 'width': '0px '});
Certificate (l.children%2%%.css ("background-color", k. color );
}
Function I (){
Var n = [];
Var l = [];
For (var m = 0, k = g. length; m <k; m ++ ){
F (bindItems [m], {color: styleData [m]});
N. push (bindItems [m]. children [1]);
L. push (Math. round (g [m] * j ))
}
E (n, 0, l, c)
}
Function e (p, o, l, n ){
For (var r = 0, q = g. length; r <q; r ++ ){
$ (P [r]). animate ({width: l [r]}, "slow ");
}
}
Return {init: a, go: I}
})();

Call method:

The Code is as follows:

Vote. ListShow. init ({
Id: 'appvotebox ',
Percent :[
0.02, 0.61, 0.36, 0.13, 0.03],
Width: 183-2
});
Vote. ListShow. go (); style: body {
Font: 12px/1.5 arial,;
}
Html, body {
Color: #333333;
}
Li. vl-item {
Float: left;
Width: 100%;
}
. 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 {
Margin: 0;
Padding: 0;
}
. App-vote em {
Font-style: normal;
}
. App-vote ul,. app-vote ol {
List-style: none outside none;
}
. Vote-box-list {
Float: left;
Width: 586px;
}
# AppVote. vote-action {
Margin-top: 30px;
Width: 60px;
}
. Vote-box-list li {
List-style: none outside none;
}
. Vote-box-list li. vote-item-wrap {
Padding: 5px 0;
}
. Vote-box-list li. over {
Background-color: # FFE57F;
}
. Vote-box-list li h4 {
Font-size: 1em;
Font-weight: normal;
Overflow: hidden;
Text-align: right;
Width: 260px;
Word-wrap: break-word;
}
. Vote-box-list li. litem {
Background: none repeat scroll 0 0 # EFEFEF;
Border: 1px solid # E2E2E2;
Height: 14px;
Width: 183px;
}
. Vote-box-list li p,. vote-box-list li h4 {
Float: left;
Margin: 0;
Padding: 0;
}
. Vote-box-list li p input {
Float: left;
Margin: 0;
}
. Vote-box-list li em,. vote-box-list li span {
Float: left;
Height: 14px;
Overflow: hidden;
}
. Vote-box-list li. vleft,. vote-box-list li. right {
Width: 2px;
}
. Vnum {
Text-indent: 5px;
Width: 90px;
}
Ul. vote-ctrl-act-sep {
Margin: 5px 0;
Overflow: hidden;
}
Ul. vote-ctrl-act-sep li {
Border-bottom: medium none;
Border-right: 1px solid #000000;
Float: right;
Margin-right:-1px;
Padding: 0 10px;
}
# AppVoteAddForm dt {
Clear: left;
Text-align: right;
Width: 150px;
}
# AppVoteAddForm. txt {
Width: 400px;
}
# AppVoteAddForm. vote {
Height: 300px;
Width: 400px;
}
# AppVoteAddForm. tip {
Color: # 6B6B6B;
}
# AppVoteAddForm. back_block {
Margin: 6px 0;
Width: 550px;
}
# Text_vote_area p. m {
Color: # 355E9D;
}
# Text_vote_area p. t {
Color: #999999;
}

Finished!