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


Posted in Javascript onAugust 28, 2011

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

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

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

基于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; 
}

完毕!
Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jquery实现弹出层效果实例
May 19 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
Node.js的特点详解
Feb 03 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 #Javascript
JavaScript 原型继承之构造函数继承
Aug 26 #Javascript
JavaScript原型继承之基础机制分析
Aug 26 #Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python的语言类型(详解)
2017/06/24 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
销售自我评价
2013/10/22 职场文书
医学生自荐信
2013/12/03 职场文书
学校食品安全实施方案
2014/06/14 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js