/** *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"><strong>"TPP,对中国经济影响几何?" 请大声说出你的观点!</strong></div>
<div class="voteCnt clearfix">
<div class="voteBox tc fl">
<ul>
<li class="voteTopic">
<div class="orange voteTitle fl" style=" 50%;">红方:中国未加入TPP,经济将遭遇滑铁卢。</div>
<div class="blue voteTitle fr" style=" 50%;">蓝方:TPP来了,对中国经济影响不大。</div>
</li>
<li class="process">
<div class="forRed voteBar fl" style=" 39.5833333333333%;"></div>
<div class="forBlue voteBar fr" style=" 60.4166666666667%;"></div>
</li>
<li class="voteNum">
<div class="fl voteNumber" style=" 50%;">已有57人投票</div>
<div class="fl voteNumber" style=" 50%;">已有87人投票</div>
</li>
<li class="btns">
<div class="fl" style=" 50%;"><a id="voteRed" class="bgOrange voteBtn" href="javascript:void(0)" optionid="5">支持红方</a></div>
<div class="fr" style=" 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:" 020"; 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 strong{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;}