js 实现点赞

作者: print("") 分类: WEB前端 发布时间: 2018-06-23 21:03

js 实现点赞

唔,我真垃圾

效果图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }

        .item{
            position: relative;
            width: 40px;
        }

    </style>

</head>
<body>
    <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>
    <div class="container">
        <div class="item">
        <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
        <span>赞</span>
        </div>
    </div>

<script src="jquery-1.12.4.js" ></script>
<script>
    $('.item').click(function () {
        AddFaove(this);
    });

    function AddFaove(self) {
        var fontSize=15;
        var top=0;
        var right=0;
        var opacity=1;

        var tag=document.createElement('span');
        $(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);
        $(self).append(tag);


        var obj=setInterval(function () {
            fontSize=fontSize + 10;
            top=top-15;
            right=right-15;
            opacity=opacity-0.2;

            $(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();
            }
        },100);
        // var v=$(self);
        //
        // console.log(v);
    }
    
    
    
</script>

</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注