Jquery操作点赞功能实列

最新推荐文章于 2022-09-30 14:27:30 发布

涉世不深

最新推荐文章于 2022-09-30 14:27:30 发布

阅读量1.9k

点赞数 2

分类专栏： JavaScript 文章标签： ĴJquery

本文链接：https://blog.csdn.net/weixin_37647823/article/details/82022195

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            padding: 50px;
            border:solid grey 1px;
            position: relative;
        }
        .zan{
            cursor: pointer;
            position: relative;

        }
        span:active{
            background-color: red;

        }
    </style>
</head>
<body>

        <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>

        <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>
      <div class="content">
            <div class="zan" active>
                <span>赞</span>
            </div>
        </div>



        <script src="jquery-1.12.4.js"></script>
        <script>

            //定义一个阻止事件，当架构加载完之后就会执行
            //当页面框架加载完成之后，自动执行
            $(function () {

                    $('.zan span').bind('click',function () {
                        $.zan(this)
                    })


                })
                 $.extend({
                        'zan':function (self) {
                                 //创建一个标签
                                var font=1;
                                var opacity=1;
                                var top=7;
                                var left=15;
                                var tag=document.createElement('span');
                                var text=$('.zan').text();
                                $(tag).text('+1');
                                $(tag).css('color','blue');

                                $(tag).css('position','absolute');
                                $(tag).css('left',left+'px');
                                $(tag).css('top',top+'px');
                                $(tag).css('opacity',opacity)
                                $(tag).css('font-size',font+"px")
                            //封装
                                $(self).append(tag)
                                var obj= setInterval(function () {
                                                    font+=5;
                                                    opacity-=0.2;
                                                    top-=5
                                                    left+=5
                                                    $(tag).css('left',left+'px')
                                                    $(tag).css('top',top+'px')
                                                    $(tag).css('opacity',opacity)
                                                    $(tag).css('font-size',font+"px")

                                                      if(opacity < 0){

                                                            clearInterval(obj);
                                                            $(tag).remove()
                                                        }
                                   `````
        },90)


                                }










            })

        </script>
</body>


</html>

涉世不深

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery操作点赞功能实列

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .content{ padd
复制链接

扫一扫

专栏目录