zoukankan      html  css  js  c++  java
  • 抽屉点赞及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;
                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>
    

     效果图:

  • 相关阅读:
    Bash : 冒泡排序
    Azure Load Balancer : 支持 IPv6
    Azure Load Balancer : 简介
    sudo 与输出重定向
    Linux lsof 命令
    Bash : IO 重定向
    LVM : 快照
    2014年全年总结
    使用Kindle4rss推送自己感兴趣的博文
    换SSD硬盘,重装系统,一阵子忙乱
  • 原文地址:https://www.cnblogs.com/momo8238/p/7469108.html
Copyright © 2011-2022 走看看