PK投票效果

/**

*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投票效果的更多相关文章

利用HTML5云存储实现模拟对比投票效果
<!DOCTYPE HTML> <html> <head> <title>模拟对比投票效果</title> <meta name=&q ...
评论PK投票功能的手机版
ajax投票.点赞.回复,投票后自动转到查看投票结果,投票结果进度条动画显示地址:http://files.cnblogs.com/files/macliu/hyw_wap.rar 效果图: 首页:
ajax加php实现简单的投票效果
废话少说,作为一个前端猿,首先上前端的代码. 1.上html代码: <!DOCTYPE html> <html> <head lang="en"> ...
javascript平时小例子⑤(投票效果的练习)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
原生JS投票特效
效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...
拼接HTML代码在UIWebVIew中显示
其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中:文章的样式已经存在项目中,直接去调用: 1:首先了解两 ...
综述-如何克服HTML5的“性工能”障碍
http://ask.dcloud.net.cn/docs HTML5自出现以来,几经风雨,虽看似很有前途,但实际使用问题太多,DCloud为此踩了无数坑.但我们从未放弃,我们加入了W3C,发起了 H ...
关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...

随机推荐

javascript 过滤空格
1: 过滤首尾空格trim.2:过滤左边空格ltrim 3:过滤右边空格用正则方法写成三个函数. <script type="text/javascript"> ...
Truck History--poj1789
Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 21534 Accepted: 8379 De ...
Hdu1096
#include <stdio.h> int main() { int T,n; ; while(scanf("%d",&T)!=EOF){ while(sca ...
Google Chrome源码剖析【序】
[序(本人什么都没做,完全转载)] 开源是口好东西,它让这个充斥着大量工业垃圾代码和教材玩具代码的行业,多了一些艺术气息和美的潜质.它使得每个人,无论你来自米国纽约还是中国铁岭,都有机会站在巨人的肩膀 ...
（转载）解决WPF动画属性锁死问题
此文来自: 马开东博客转载请注明出处网址:http://www.makaidong.com 一般锁死问题都是出在后台代码写的动画中,以下为转载的解决方案! 方法一:将动画的 FillBehavio ...
微软官方的Unity支持组件
https://unity.codeplex.com/ http://www.nuget.org/packages/Unity.Interception/ http://www.nuget.org/p ...
nodejs 设置网络代理
在使用nodejs的过程中,加入使用代理上网,那么安装组件会失败,此时配置代理即可,命令如下: [root@oracle ~]#npm config set proxy=http://10.101.1 ...
Makefile中使用foreach生成一类规则
CSDN上,有朋友发帖问了这样一个问题(我按自己的理解翻译一下): 当前目录下有四个静态库文件: liba.a libb.a libc.a libd.a.现在想将它们做成一个动态库libp.so. ...
Codeforces Round #389(div 2)
A =w= B QvQ C 题意:在一个格子图里给出一个路径里面有UDLR四种移动方向问我在格子路径里面最少选几个点可以让我沿着格子路径走其实是在相邻的点与点之间走最短路分析:贪心+模拟 ...
浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

PK投票效果

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

随机推荐

热门专题