移動端zepto點贊效果分析

<script>
    $(document).ready(function (e) {
        $('a.zhan').click(function () {

            var left = parseInt($(this).offset().left) + 10,
                top = parseInt($(this).offset().top) - 10,
                obj = $(this),
                iclick=obj.children('i');

            if(iclick.hasClass('i1_hide')){
                iclick.addClass('i1_show').removeClass('i1_hide');
                $(this).append('<div class="zhans"><b>+1</b></div>');
                $('.zhans').css({
                    'position':'absolute',
                    'z-index':'1',
                    'color':'red',
                    'left':left+'px',
                    'top':top+'px'
                });

                $('.zhans').animate({
                    'top':top-10,
                    'left':left+10
                },500,'',function(){
                    $(this).hide().remove(200);
                    var Num = parseInt(obj.next('span').text());
                    Num++;
                    obj.next('span').text(Num);
                });
           

//jq的animate與zepto有所不一樣；
           

//看到zepto裡面我用的animate裡，大家可能會有疑問，xx.animate({css樣式}，動畫時間，動畫類型(如無類型，則為''代替，否則會報錯),回調函數)
           

return false;
            }

            if( iclick.hasClass('i1_show')){
                iclick.addClass('i1_hide').removeClass('i1_show');
                $(this).append('<div class="zhans"><b>-1</b></div>');
                $('.zhans').css({
                    'position':'absolute',
                    'z-index':'1',
                    'color':'red',
                    'left':left+'px',
                    'top':top+'px'
                });

                $('.zhans').animate({
                    'top':top-10,
                    'left':left+10
                },500,'',function(){
                    $(  this).hide().remove(200);
                    var Num = parseInt(obj.next('span').text());
                    Num--;
                    obj.next('span').text(Num);
                });
                return false;
            }


        });
    });
</script><pre name="code" class="html"><div class="fc_help_detail_problem2 clearfix">
    <span class="shoufe1 dis">
         <a class="zhan" href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i class="i1 i1_hide"></i></a>
         <span>12</span>
    </span>
    <span class="shoufe1 dis">
        <a class="zhan" href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><i class="i2 i1_hide"></i></a>
        <span>0</span>
    </span>
</div>
           

</pre><pre name="code" class="html">
           

<pre name="code" class="css">.fc_help_detail_problem2 {
  border-bottom: solid 1px #eaeaea;
  height: auto;
}
.fc_help_detail_problem2 span {
  position: relative;
  display: inline-block;
  width: 50%;
  text-align: center;
}

.fc_help_detail_problem2 span a {
  display: inline-block;
  text-align: center;
}

.fc_help_detail_problem2 span .zhan i.i1 {
  margin-left: 1em;
  background: url(../images/praise_up.png) no-repeat;
  display: inline-block;
  height: .4rem;
  width: .4rem;
  vertical-align: middle;
}

.fc_help_detail_problem2 span .zhan i.i1_hide {
  background-position: -.46rem 0 !important;
}

.fc_help_detail_problem2 span .zhan i.i1_show {
  background-position: 0 0 !important;
}