投票，拉票，战队pk

 

 

 <style>
                #box_bg{ width:440px; height:10px; background:url(images/bg.gif) no-repeat; padding:24px 48px; margin:0px auto;}
                #container{height:10px;  position:relative;}
                .line{height:10px;  position:absolute;}
                #white,#green{ width:100%;}
                #green{background:url(images/green.gif) repeat-x #00FF00;  height:10px; }
                #red{background:url(images/red.gif) repeat-x #FF0000; height:10px; width:50%;}
                #white{ background-color:#fff}
                #vs{
                    width:40px; height:40px; background:url(images/vs.gif) center no-repeat; background-size: 100%; line-height:40px; text-align:center;
                    position:absolute; left:205px; top:-16px; display:none
                }
                .scope{height:24px;  text-align:center; }
                .vote{height:24px;  text-align:center; background: #ff0000; padding: 2px 10px; color: #fff; cursor: pointer; }
                .scope span{ color:#FF3300; font-weight:bold; padding:0px 5px;}
                #all2{margin:0 auto }
                #aa2{float:left}
                #bb2{float:right}
            </style>

<script type="text/javascript" src="js/jquery.min.js"></script>

优化后的js

<script>
    var vote = {
      a:0,
      b:10,
      newLeft:0, //20为vs 的一半
      newWidth:0,
      gamePk:function () {
        var self = this;
        $("#vs").fadeIn("slow",function(){
          $("#all").html(self.a+self.b);
          $("#aa").html(self.a);
          $("#bb").html(self.b);
          console.log(self.a,self.b);
          self.newLeft=self.a/(self.a+self.b)*440-20 + "px";//20为vs 的一半
          self.newWidth=self.a/(self.a+self.b)*440 + "px";
          $("#vs").stop().animate({left:self.newLeft}, 500);
          $("#red").stop().animate({width:self.newWidth}, 500);
        });
      },
      obverse:function () {
        this.a++;
        this.gamePk();
      },
      reverse:function () {
        this.b++;
        this.gamePk();
      },
      init:function () {
        var self = this;
        $("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
          self.gamePk();
        });
        $("#vote1").click(function () {
          self.obverse();
        });
        $("#vote2").click(function () {
          self.reverse();
        });
      }
    }

    vote.init();


</script>

 

原来的js是这样写的

$(document).ready(function(){
    var a = 500;
    var b = 200;
    $("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
        $("#vs").fadeIn("slow",function(){
            $("#all").html(a+b);
            $("#aa").html(a);
            $("#bb").html(b);
            var newLeft = a/(a+b)*500-20 + "px"; //20为vs 的一半
            var newWidth = a/(a+b)*500 + "px"; //20为vs 的一半
            $("#vs").animate({left:newLeft}, 1000);
            $("#red").animate({width:newWidth}, 1000);
        });
    });
});