/** *createTime:2015-07-21 *updateTime:2015-06-22 *author:刘俊 *Description：PK投票 *phone:13469119119 **/ /*投票*/ (function($){ //投票插件 $.fn.voter = function(dom) { dom = $.extend({ voteTit: ".voteTitle",//投票观点 voteBar: ".voteBar",//投票进度条 voteNumber: ".voteNumber",//投票数 voteBtn: ".voteBtn",//投票按钮 widthArr: [],//记录每个观点的宽度 voteArr: [],//记录每个观点的票数 url:"", optionid:0//隐藏值 }, dom || {}); //用初始数据渲染初始视图 function initArr(){ var arrLen = $(dom["voteBar"]).length; getWidth(); var wid = 100/arrLen;///进度条的初始宽度 $(dom.voteNumber).css("width", wid "%"); $(dom.voteTit).css("width", wid "%"); $(dom.voteBtn).parent().css("width", wid "%"); for(var n=0;n<arrLen;n ){ $(dom.voteBar).eq(n).css("width", "0").stop().animate({"width": dom.widthArr[n] "%"}, 500); $(dom.voteNumber).eq(n).html("已有" dom.voteArr[n] "人投票"); } return dom.voteArr;//返回各种观点的投票数 }; //返回所有观点的总票数 function summer(arr){ var summ = 0; var len = arr.length; for(var i = 0;i<len; i ){ summ = arr[i] summ; } return summ; }; //获取每个进度条的宽度 function getWidth(){ var len = $(dom.voteBar).size();//投票进度条的数量 var summ = summer(dom.voteArr);//票数改变后，寻求总和 for(var j=0;j<len;j ) { dom.widthArr[j] = (dom.voteArr[j] / summ * 100);//修改各观点投票比例 } return dom.widthArr; }; //各观点票数除以总票数乘以100，得出各观点票数占总票数百分比的数组 function init(domObj){ var idx = domObj.index();//当前进度条的索引值
dom.voteArr[idx] += 1; //当前观点得票数加1,更新数组；
var ary = getWidth();//获取各观点进度条宽度数组
var aryy = dom.voteArr; /*向服务器提交更新后的数据*/ $.ajax({ url:dom.url, type: "post", data: {radio:dom.optionid}, success: function(data){ if(data==='1'){ for(var j=0;j<ary.length;j++){ $(".voteBar").eq(j).css("width","0px").stop().animate({"width":dom.widthArr[j]+"%"},500);//使用更新的数据渲染视图
$(".voteNumber").eq(j).html("已有"+ dom.voteArr[j] +"人投票");//使用更新的数据渲染视图
} }else{ alert(data); } } }); } initArr();//初始化宽度和票数
$(dom.voteBtn).click(function(){ var domobj = $(".voteBar").eq($(this).parent().index()); dom.optionid = $(this).attr('optionid'); init(domobj); }); }; })(jQuery);
HTML结构:
<div class="w1200 mt10 mb10 voter clearfix"> <div class="voteTit tc orange"><label>"TPP，对中国经济影响几何？" 请大声说出你的观点！</label></div> <div class="voteCnt clearfix"> <div class="voteBox tc fl"> <ul> <li class="voteTopic"> <div class="orange voteTitle fl" style="width: 50%;">红方：中国未加入TPP，经济将遭遇滑铁卢。</div> <div class="blue voteTitle fr" style="width: 50%;">蓝方：TPP来了，对中国经济影响不大。</div> </li> <li class="process"> <div class="forRed voteBar fl" style="width: 39.5833333333333%;"></div> <div class="forBlue voteBar fr" style="width: 60.4166666666667%;"></div> </li> <li class="voteNum"> <div class="fl voteNumber" style="width: 50%;">已有57人投票</div> <div class="fl voteNumber" style="width: 50%;">已有87人投票</div> </li> <li class="btns"> <div class="fl" style="width: 50%;"><a id="voteRed" class="bgOrange voteBtn" href="javascript:void(0)" optionid="5">支持红方</a></div> <div class="fr" style="width: 50%;"><a id="voteBlue" class="bgBlue voteBtn" href="javascript:void(0)" optionid="6">支持蓝方</a></div> </li> </ul> </div> </div></div>
css样式：
/*全站初始化样式*/
body{
font:12px/24px microsoft yahei,"微软雅黑",sans-serif;color:#111;background-color:#fff;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
padding:0;margin:0}
label {
cursor:pointer;}
ol,ul,li{
list-style:none;}
em,b,i,u{
font-style:normal;font-weight:normal;text-decoration:none;}
table{
border-collapse:collapse;}
fieldset,img,input,button{
border:none}
input,select,textarea{
font-family:microsoft yahei;}
a{
text-decoration:none;color:#333;outline:none;}
a:hover{
text-decoration:none;color:#ff4c00;}
.clearfix:after{
content:"\0020"; height:0; display:block; clear:both; overflow:hidden}
.clearfix{
*zoom:1;}
/*位置与浮动*/
.w1200{
width:1200px;margin:0 auto;}
.w1198{
width:1198px;margin:0 auto;}
.w920 {
width:920px;}
.w270 {
width:270px;}
.w760 {
width:760px;}
.w230 {
width:230px;}
.w700 {
width:700px;}
.w420 {
width:420px;}
.fl {
float:left;}
.fr {
float:right;}
.posir{
position:relative;}
.tl {
text-align:left;}
.tc {
text-align:center;}
.tr {
text-align:right;}
.txj {
text-align:justify;}
.mt5 {
margin-top:5px;}
.mt10{
margin-top:10px;}
.mt20{
margin-top:20px;}
.mb5 {
margin-bottom:5px;}
.mb10{
margin-bottom:10px;}
.mb20{
margin-bottom:20px;}
.pt5 {
padding-top:5px;}
.pt10{
padding-top:10px;}
.pt20{
padding-top:20px;}
.pb5 {
padding-bottom:5px;}
.pb10{
padding-bottom:10px;}
.pb20{
padding-bottom:20px;}
.pd10{
padding:10px;}
.pd20{
padding:20px;}
.pd30{
padding:30px;}
.lht18{
line-height:18px;}
.withBorder{
border:1px solid #ddd;}
.with3Border{
border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.with2Border{
border-left:1px solid #ddd; border-right:1px solid #ddd;}
.withBtBorder{
border-bottom:1px solid #ddd;}
.whiteBorder {
border:1px solid #fff;}
/*公用文字样式*/
.red {
color:#df0e0e;}
.blue {
color:#2096ee;}
.brown {
color:#666;}
.orange{
color:#f60;}
.green {
color:#090;}
.cyan {
color:#00b7a2;}
.gray {
color:#999;}
.yellow{
color:#f90;}
.pink {
color:#fe6d6a;}
.purple{
color:#7b46d7}
.white {
color:#fff;}
.cutFont{
white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.font12{
font-size:12px; font-weight:normal;}
.font14{
font-size:14px;}
.font16{
font-size:16px;}
.font18{
font-size:18px;}
.font20{
font-size:20px;}
.font22{
font-size:22px;}
.font24{
font-size:24px;font-weight:normal;}
.bold {
font-weight:bold;}
/*背景色公用样式*/
.bgWhite {
background-color:#fff;}
.bgBlue {
background-color:#2791eb;}
.bgOrange{
background-color:#ff5a00;}
.bgGray {
background-color:#f7f7f7;}
.bgCyan {
background-color:#20d0bc;}
.bgPurple{
background-color:#9c75df;}
.hoverBG {
background-color:#e8e8e8;}
/*图标*/
.fa {
display:inline-block; float:left; background:url(../images/sprite.png) no-repeat;}
.fa-login{
background-position:0 7px;width:23px;height:26px;}
.fa-user{
background-position:-36px 6px;width:23px;height:26px;}
.fa-home{
background-position:-71px 6px;width:23px;height:26px;}
.fa-arrDown{
background-position:-128px 0;width:10px;height:10px;position:absolute;top:16px;right:3px;}
.fa-telx2{
background-position:0 -35px;width:45px;height:35px;}
.fa-telx3{
background-position:-149px -70px;width:45px;height:35px;}
.fa-cart{
background-position:-69px -26px;width:35px;height:35px;}
.fa-up{
background-position:-109px -35px;width:12px;height:6px;}
.fa-down{
background-position:-109px -47px;width:12px;height:6px;}
.fa-arrow{
background-position:-195px 2px;width:12px;height:12px;}
.fa-peddler{
background-position:-160px 0;width:20px;height:12px;}
.fa-redstar{
background-position:-128px -36px;width:15px;height:15px;}
.fa-qq{
background-position:-106px -71px;width:15px;height:16px;}
.fa-load{
background-position:-230px -35px;width:11px;height:11px;}
.fa-leftx2{
background-position:0 -70px;width:16px;height:38px;}
.fa-rightx2{
background-position:-37px -70px;width:16px;height:38px;}
.fa-leftx1{
background-position:-159px -35px;width:12px;height:25px;}
.fa-rightx1{
background-position:-186px -35px;width:12px;height:25px;}
.fa-local{
background-position:-229px 2px;width:20px;height:20px;}
.fa-newico{
background-position:-71px -72px;width:25px;height:15px;}
.fa-hotico{
background-position:-71px -95px;width:25px;height:15px;}
.fa-guide{
background-position:0 -123px;width:35px;height:35px;}
.fa-service{
background-position:-54px -123px;width:35px;height:35px;}
.fa-supply{
background-position:-106px -123px;width:35px;height:35px;}
.fa-safe{
background-position:-160px -123px;width:35px;height:35px;}
.fa-pay{
background-position:-210px -123px;width:35px;height:35px;}
.fa-follow{
background-position:-210px -70px;width:35px;height:35px;}
.fa-clear{
background-position:-106px -92px;width:15px;height:15px;}
.fa-half{
background-position:-203px -35px;width:10px;height:10px;}
.fa-clockx2{
background-position:0 -177px;width:25px;height:25px;}
.fa-notex2{
background-position:-33px -177px;width:25px;height:25px;}
.fa-warx{
background-position:-70px -177px;width:16px;height:16px;}
.fa-pens{
background-position:-213px -177px;width:18px;height:18px;}
.fa-cartw{
background-position:-34px -213px;width:18px;height:26px;}
.fa-fav{
background-position:-71px -213px;width:20px;height:26px;}
.fa-selArr{
background-position:-129px -180px;width:15px;height:18px;}
/*按钮,i表示input类型的，a表示a标签*/
.blueBtni{
background-color: #2096ee; text-align: center; color: #fff; width:100%; cursor:pointer;}
.blueBtni:hover,.sbtnBlue:hover{
background-color: #007de7;}
.sbtnBlue {
background-color: #2096ee; color: #fff; width: 60px; height: 24px; cursor: pointer; margin-left: 5px;}
.borderGrayBtn{
display:inline-block; background-color:#fffbff; border:1px solid #ddd;}
/*PK投票*/
.voter{
width:1120px;height:270px;background:url("../images/sprite/voteBG.png") left top no-repeat #e2f1ff;}
.voter .voteTit{
height:78px;line-height:78px;}
.voter .voteTit label{
font-size:24px;}
.voter .voteCnt,.PLlist{
padding:0 20px;}
.voter .voteCnt{
height:167px;}
.voter .voteBox{
width:1004px;height:167px;padding:0 38px;overflow:hidden}
.voter .voteBox li{
overflow:hidden;}
.voter .voteBox li div{
width:382px;}
.voter .voteBox .voteTopic{
height:47px;font:16px/47px "microsoft yahei";}
.voter .voteBox .process{
width:1004px;height:34px;background:#fff;margin-bottom:15px;}
.voter .voteBox .process .forRed{
background:#f8894d;}
.voter .voteBox .process .forBlue{
background:#4baafb;}
.voter .voteBox .voteNum{
height:30px;font-size:14px;color:#828282;}
.voter .voteBox .btns{
height:40px;}
.voter .voteBox .btns a{
width:100px;height:40px;line-height:40px;font-size:14px;color:#fff;margin:0 auto;display:block;}
.voter .voteBox .btns .bgOrange:hover{
background:#fd8d4f;}
.voter .voteBox .btns .bgBlue:hover,
.pinglun .editBox .topLi .fr:hover{
background:#4baafb;}