jQuery CSS操作 点赞样式 

<!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: 40px;

        }
    </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>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this)

        });
        function AddFavor(slef) {
            var fontSize=15;
            var top =0;
            var right=0;
            var opacity = 1;

            var tag = document.createElement('span');
            //dom对象,转换为jQuery对象
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize +"px");
            $(tag).css('top',top +"px");
            $(tag).css('right',right +"px");
            $(tag).css('opacity',opacity);

            $(slef).append(tag);
            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top =top - 10;
                right = right- 10;
                opacity =opacity - 0.1;
            //    重新赋值
                $(tag).css('fontSize',fontSize +"px");
                $(tag).css('top',top +"px");
                $(tag).css('right',right +"px");
                $(tag).css('opacity',opacity);
                var v =$(slef);

                if (opacity<0){
                    clearInterval(obj)
                    $(tag).remove();
                }


            },100);

        }
    </script>




</body>
</html>

 

posted @ 2021-02-18 17:07  安好_世界  阅读(88)  评论(0)    收藏  举报