zoukankan      html  css  js  c++  java
  • 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=" 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;}



  • 相关阅读:
    CSS优化压缩
    CSS clear both清除浮动总结
    jQuery下拉列表二级联动插件
    网站靠什么赚钱?
    程序员到高级程序员的职业生涯
    ie数组不支持indexOf 方法解决
    jquery中的each方法,$.each this.each $.fn.each
    css3写出0.5px的边框
    js 自己创建ready多个可以依次加载
    javascript中的removeEventListener失效问题
  • 原文地址:https://www.cnblogs.com/macliu/p/5241022.html
Copyright © 2011-2022 走看看