抽屉点赞及jQuery CSS操作

1.需要用到的知识点：

CSS处理
	$('t1').css('color','red')
	点赞：
		-$('t1').append()
　　　　　　　　　 -$('t1').remove()
		-setInterval
		-opacity 1-->0
		-position
		-字体大小，位置

程序：

<!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:50px;
        }
    </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>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function(){
            AddFavor(this)
        });
        function AddFavor(self){
            //dom对象
            var fontSize=15;
            var top=0;
            var right=0;
            var opacity=1;

            var tag=document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('fontSize',fontSize+'px');
            $(tag).css('position','absolute');
            $(tag).css('top',top+'px');
            $(tag).css('right',right+'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj=setInterval(function(){
                fontSize=fontSize+5;
                top=top-5;
                right=right-5;
                opacity=opacity-0.1;

                $(tag).css('fontSize',fontSize+'px');
                $(tag).css('position','absolute');
                $(tag).css('top',top+'px');
                $(tag).css('right',right+'px');
                $(tag).css('opacity',opacity);

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

            },100);

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

效果图：

posted on 2017-09-03 11:14 momo8238 阅读(244) 评论(0) 收藏举报