/**
*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="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:;margin:}
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:; display:block; clear:both; overflow:hidden}
.clearfix{*zoom:;}
/*位置与浮动*/
.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;}

PK投票效果的更多相关文章

  1. 利用HTML5云存储实现模拟对比投票效果

    <!DOCTYPE HTML> <html> <head> <title>模拟对比投票效果</title> <meta name=&q ...

  2. 评论PK投票功能的手机版

    ajax投票.点赞.回复,投票后自动转到查看投票结果,投票结果进度条动画显示 地址:http://files.cnblogs.com/files/macliu/hyw_wap.rar 效果图: 首页:

  3. ajax加php实现简单的投票效果

    废话少说,作为一个前端猿,首先上前端的代码. 1.上html代码: <!DOCTYPE html> <html> <head lang="en"> ...

  4. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. jquery仿搜狐投票动画代码

    体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...

  6. 原生JS投票特效

    效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...

  7. 拼接HTML代码在UIWebVIew中显示

    其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中:文章的样式已经存在项目中,直接去调用: 1:首先了解两 ...

  8. 综述-如何克服HTML5的“性工能”障碍

    http://ask.dcloud.net.cn/docs HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑.但我们从未放弃,我们加入了W3C,发起了 H ...

  9. 关于Mongodb的全面总结

    MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...

随机推荐

  1. dynamic和object浅谈

    要想知道dynamic和object的关系必须先理解它们的含义 C# 4.0提供了一个dynamic 关键字.在MSDN里是这样描述:在通过 dynamic 类型实现的操作中,该类型的作用是绕过编译时 ...

  2. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  3. Jquery各版本下载,附Jquery官网下载方法

    jQuery version 2.1.1 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js http://ajax.aspnetcdn.com ...

  4. php中的MVC模式运用

    [size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...

  5. javascript第二课练习

    <script type="text/javascript">   window.onload=function()   //网页全部加载完后执行   {     va ...

  6. IOS 保存图片至相册

    IOS 保存图片至相册   应用中有时我们会有保存图片的需求,如利用UIImagePickerController用IOS设备内置的相机拍照,或是有时我们在应用程序中利用UIKit的 UIGraphi ...

  7. Django 反向生成 从数据库生成Model

    Django 反向生成 从数据库生成Model 使用Django生成Model python manage.py inspectdb或python manage.py inspectdb > m ...

  8. PowerShell 管道和对象成员

    2.1  管道 在各种现代的shell中,均支持管道的概念. 管道的最大特点就是:  前一个命令的输出作为后一个命令的输入.cmd.bash均支持管道的概念,这里我就不多说了,下面我们说说PS中 管道 ...

  9. 单链表之C++实现

    在实现单链表时要注意对单链表的逻辑存储.物理存储有清晰的概念. 如上图链表已经完成,其逻辑结构如上.当需要对其进行操作,比如插入.删除,通常需要引 入指针,如上的ptr1.ptr2.在编程时一定要注意 ...

  10. VS快捷编码方式

    概念: 代码段是将预先定义好的可重用代码块快速插入到代码文件中,代码段提高了开发效率,增强了代码的可重用性:既节约了时间,又实现了不同开发人员间代码的共享.同时也可保证同一项目中代码风格的统一.   ...