html实现点赞效果

骑猪看日落 2022-05-10 19:42 478阅读 9赞

源码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .item{
                height: 200px;
                border: solid 1px coral;
                }
            .zan{
                width: 30px;
                height: 30px;
                color: white;
                background-color: black;
                cursor: pointer;
                position: relative;
            }
        </style>
    </head>
    <body>
    <div class="item"><div class="zan">赞</div></div>
    <div class="item"><div class="zan">赞</div></div>
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(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)
            })
        })
    </script>
    </body>
    </html>