JavaScript（18）：点赞功能的实现

最新推荐文章于 2024-06-14 10:42:57 发布

仲永要加油呀

最新推荐文章于 2024-06-14 10:42:57 发布

阅读量5.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31655771/article/details/80696049

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞功能的实现</title>
    <style>
        .container{
            padding: 50px;
            height: 200px;
        }
        .praise{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="praise">赞</span>
    </div>

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

        function addPraise(self) {
            var fontsize = 15;
            var left = 15;
            var bottom = 0;
//            left、bottom都是指标签内容到左边框和下边框之间的像素距离
            var opacity = 1;
            var s = document.createElement('span');
            $(s).text('+1');
            $(s).css('position','relative');
//            相对定位，相对于原本位置的定位
            $(s).css('color','red');
            $(s).css('fontSize',fontsize+'px');
            $(s).css('left',left+'px');
            $(s).css('bottom',bottom+'px');
            $(s).css('opacity',opacity);
            $('.container').append(s);

            var val = setInterval(function () {
                fontsize += 3;
                left += 2;
                bottom += 5;
                opacity -= 0.1;
                $(s).css('fontSize',fontsize+'px');
                $(s).css('left',left+'px');
                $(s).css('bottom',bottom+'px');
                $(s).css('opacity',opacity);
                if (opacity<0){
                    clearInterval(val);
                    $('.praise').siblings().remove();
                }
            },40)
        }
    </script>
</body>
</html>

仲永要加油呀

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（18）：点赞功能的实现

示例代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点赞功能的实现&lt;/title&gt; &lt;style&gt; .container{
复制链接

扫一扫

专栏目录