html点賛効果を実現

    
    
    


 
 



    $(function () {
        $('.zan').click(function () {
            var tag=document.createElement('span')
            tag.style.color='green';
            tag.style.position='absolute';
            tag.innerHTML='+1'

            var top=5;
            var left=5;
            var fontsize=12;
            var opacity=1;

             tag.style.fontSize=fontsize+'px';
             tag.style.top=top+'px';
             tag.style.left=left+'px';
             tag.opacity=opacity;
             $(this).append(tag);

            var obj=setInterval(function () {
                top-=15;
                left+=5;
                fontsize+=12;
                opacity-=0.2;

                tag.style.fontSize=fontsize+'px';
                tag.style.top=top+'px';
                tag.style.left=left+'px';
                tag.opacity=opacity;

                if(opacity<0){
                    clearInterval(obj);
                    tag.remove();
                }
                },100)
        })
    })