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>

注意大小写

posted @ 2018-11-10 11:28  大眼侠  阅读(149)  评论(0)  编辑  收藏  举报