jquery点赞-定时器与css操作

最新推荐文章于 2024-08-30 04:10:51 发布

YoungfreeFJS

最新推荐文章于 2024-08-30 04:10:51 发布

阅读量375

点赞数

分类专栏： jquery 文章标签： jq

本文链接：https://blog.csdn.net/qq471011042/article/details/79339691

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .cot {
            padding: 50px;
            border: 1px solid red;
        }

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

    </style>
</head>
<body>
<div class="cot">
    <div class="item">赞</div>

</div>
<div class="cot">
    <div class="item">赞</div>
</div>
<div class="cot">
    <div class="item">赞</div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
    //    $('.item').append('<span>+1</span>').css('')
    $('.item').click(function () {
        dianzan1(this);
    });
    function dianzan1(m) {
        var font_size = 15;
        var top = 0;
        var right = 0;
        var opa = 1;

        var tag = document.createElement('span');
        $(tag).text('+1');

        $(tag).css('color', 'green');
        $(tag).css('position', 'absolute');
        $(tag).css('fontSize', font_size + 'px');
        $(tag).css('top', top + 'px');
        $(tag).css('right', right + 'px');
        $(tag).css('opacity', opa);
        $(m).append(tag);

        var time = setInterval(function () {
            font_size += 10;
            top += -10;
            right += -10;
            opa -= 0.2;
            $(tag).css('fontSize', font_size + 'px');
            $(tag).css('top', top + 'px');
            $(tag).css('right', right + 'px');
            $(tag).css('opacity', opa);
            if (opa < 0) {
                clearInterval(time);
                $(tag).remove();
            }
        }, 100);
    }

</script>
</body>
</html>