day17--15章节 点赞功能实现

1、点击赞的字样时，会出现“+1”样式，并且+1样式逐渐变大，透明度逐渐变小，最后该字样消失（透明度为0）

（1）css代码：

       <style>
            .container{
                padding: 50px;
                border: 1px solid black;
            }
            .item{
                position: relative;
                width: 30px;
            }
        </style>

（2）html代码：

      <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>
        <div class="container">
            <div class="item">
                <span>赞</span>
            </div>
        </div>

（3）jquery代码;

<script src="jquery-1.12.4.js"></script>
        <script>
            $('.item').click(function(){
                var fontSize=15;
                var top=0;
                var right=0;
                var opacity=1;
                
                var tag=document.createElement('span');     //给+1字样设置样式
                $(tag).text('+1');
                $(tag).css('color','green');
                $(tag).css('position','absolute');
                $(tag).css('fontSize',fontSize+"px");
                $(tag).css('top',top+"px");
                $(tag).css('right',right+"px");
                $(tag).css('opacity',opacity);
                $(this).append(tag);
                
                var obj=setInterval(function(){      //给+1字样设置定时器，字体逐渐变大，逐渐变透明
                    fontSize=fontSize+10;
                    top=top-10;
                    right=right-10;
                    opacity=opacity-0.1;
                    
                    $(tag).css('fontSize',fontSize+"px");
                    $(tag).css('top',top+"px");
                    $(tag).css('right',right+"px");
                    $(tag).css('opacity',opacity);
                    if(opacity<0){
                        clearInterval(obj);
                        $(tag).remove();
                    }
                },40)
            })        
        </script>