运用jQuery实现动态点赞

写一个动态点赞的小案例吧！

虽然有点low,但是初学者可以看看！

.Css文件

 .content{
            border: 1px solid black;
            font-size: 20px;
            height: 100px;
        }
        .item{
            margin-left:200px;
            line-height: 100px;
            position: relative;
            width: 30px;
        }

.Html文件

<div class="content">
        <div class="item">
            <span>赞</span>
        </div>
</div>

.Js文件

$(".item").click(function () {
            Show(this);
        });
        function Show(self) {
            var fontSize = 15;
            var right = 0;
            var top = 0;
            var opacity = 1;

            var tag = document.createElement("span");
            $(tag).text("+1");
            $(tag).css("color", "red");
            $(tag).css("position", "absolute")
            $(self).append(tag);

            var s=setInterval(function () {
                fontSize = fontSize + 10;
                right = right - 5;
                top = top - 5;
                opacity = opacity - 0.2;

                $(tag).css("fontSize", fontSize + "px");
                $(tag).css("right", right + "px");
                $(tag).css("top", top + "px");
                $(tag).css("opacity", opacity + "px");
                if(opacity <0){
                    clearInterval(s);
                    $(tag).remove();

                }
            }, 200)
        }

 

转载于:https://www.cnblogs.com/zhuifeng-mayi/p/9004452.html