jqurey实现点赞特效

时间：2018-11-10 15:24:45 阅读：204 评论：0 收藏：0 [点我收藏+]

标签：query nts title color ext code html top contain

<!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>

注意大小写

jqurey实现点赞特效

标签：query nts title color ext code html top contain

原文地址：https://www.cnblogs.com/bianzhuo/p/9938731.html

踩

(1)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行