Discuz教程网

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

[复制链接]
authicon dly 发表于 2011-9-8 16:27:02 | 显示全部楼层 |阅读模式
打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果



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. }
复制代码

完毕!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x



上一篇:一个JQuery写的点击上下滚动的小例子
下一篇:js页面滚动时层智能浮动定位实现(jQuery/MooTools)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 06:53

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表