点赞_csdn博客怎么点赞博客-CSDN博客

最新推荐文章于 2024-05-08 19:36:35 发布

wait_for_eva

最新推荐文章于 2024-05-08 19:36:35 发布

阅读量280

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/wait_for_eva/article/details/78418559

版权

python 专栏收录该内容

116 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>godme</title>
    <style>
        .action:hover{
            cursor: pointer;
        }
        .action{
            width: 50px;
            position: fixed;
            top:40%;
            left:40%;
            font-size: 80px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="action">
        <span>赞</span>
    </div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $('.action').click(function () {
        var fontSize = 15;
        var top = 0;
        var left = 50;
        var opacity = 1;
        var d = document.createElement("span");
        $(d).css("position","absolute");
        $(d).css('color','green');
        $(d).text("+4");
        $(d).css("fontSize",fontSize);
        $(d).css("top",top + "px");
        $(d).css("left",left + "px");
        $(d).css("opacity",opacity);
        $(this).append(d);
        var obj = setInterval(function () {
            fontSize += 5;
            top -= 10;
            left += 8;
            opacity -= 0.2;
            $(d).css("fontSize",fontSize);
            $(d).css("top",top + "px");
            $(d).css("left",left + "px");
            $(d).css("opacity",opacity-0.1);
            if(opacity <= 0){
                clearInterval(obj);
                $(d).remove();
            }
        },100);
    })
</script>
</html>