jqurey实现点赞特效

最新推荐文章于 2021-06-03 04:49:43 发布

大眼侠

最新推荐文章于 2021-06-03 04:49:43 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/qq670471201/article/details/88789713

版权

jqurey实现点赞特效

<!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:30px;
        }
    </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>

    <script src="jquery1.9.js"></script>
    <script>
        $(".item").click(function () {
           // console.log(11);
            AddFavor(this);
        })
        function AddFavor(self) {
            var fontsize=3;
            var top=0;
            var right=0;
            var opcity=1;

            var tag=document.createElement('span');
            $(tag).text("+1");
            $(tag).css("color","green");
            $(tag).css("position","absolute");
            $(tag).css("fontSize",fontsize+"px");
            $(tag).css("right",right+"px");
            $(tag).css("top",top+"px");
            $(tag).css("opacity",opcity);
            $(self).append(tag);
            var obj=setInterval(function () {
                fontsize=fontsize+5;
                top=top-10;
                right=right-10;
                opcity =opcity-0.1;
                $(tag).css("color","green");
                $(tag).css("position","absolute");
                $(tag).css("fontSize",fontsize+"px");

                 console.log(fontsize);
                $(tag).css("right",right+"px");
                $(tag).css("top",top+"px");
                $(tag).css("opacity",opcity);
                if(opcity<0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },40);
        }

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