多彩百分比 动态进度条 投票效果显示（jquery）
打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果
HTML结构:
<ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em> </p><span class=vnum>79（2%）</span> </div> <li class="vl-item" id="voteItem1" > <div class="vote-item-wrap"> <h4>B：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p> <span class=vnum>1986（61%）</span> </div> <li class="vl-item" id="voteItem2"> <div class="vote-item-wrap"> <h4>C：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p> <span class=vnum>1153（36%）</span> </div> <li class="vl-item" id="voteItem3" > <div class="vote-item-wrap"> <h4>D：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p> <span class=vnum>415（13%）</span> </div> <li class="vl-item" id="voteItem4" > <div class="vote-item-wrap"> <h4>5：</h4> <p class="litem"><em class=vleft></em><span></span><em class=vright></em></p> <span class=vnum>89（3%）</span> </div> </ul>
jquery代码:
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) { $(l.children[0]).css("background-color", k.color); $(l.children[1]).css({'background-color': k.color,'width': '0px'}); $(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} })();
调用方法:
Vote.ListShow.init({
id: 'appVoteBox',
percent: [
0.02, 0.61, 0.36, 0.13, 0.03],
width: 183 - 2
});
Vote.ListShow.go();
样式:
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;}
完毕!
