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>

效果图：

抽屉点赞及jQuery CSS操作的更多相关文章

  1. jQuery CSS 操作

    jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数: $(selector).css(name,value) $(selector).css({properties}) $ ...

  2. jQuery css操作

    jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...

  3. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  4. jQuery CSS 操作函数（六）

    CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...

  5. jQuery CSS 操作 - offset() 方法

    今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...

  6. jQuery CSS 操作函数

    CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...

  7. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

  8. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  9. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

随机推荐

  1. Android：制作聊天气泡点9图

    步骤一:选择res下的一张图片,右击选择“Create 9-Patch File” 步骤二:确定点9图的名字,只能修改.9.png之前的信息 步骤三:在同目录下会生成刚才创建的点9图,双击打开进行编辑 ...

  2. 使用装饰器@property

    1.在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 98s.score = 1000 # 属性 ...

  3. nginx 反向代理到目录

    upstream yg{ server 127.0.0.x; } server { listen 80; server_name www.hikaru.pw; location / { rewrite ...

  4. springboot入门之一：环境搭建（续）

    在上篇博客中从springboot的入门到运行一个springboot项目进行了简单讲述,详情请查看“springboot入门之一”.下面继续对springboot做讲述. 开发springboot测 ...

  5. php+MySQL的对用户表分表，使用户均匀分布

    假如说我们目前已有一亿个注册用户,要把这些用户平均分配到100张表中,并且后续注册的用户也要均匀分配到这100张表 首先当用户注册时,如用户名为“username”,用php的crc32()函数处理用 ...

  6. Jenkins Tomcat安装设置

    Jenkins Tomcat安装设置 以下为必须满足Jenkins Tomcat设置的先决条件. 第1步:验证安装Java 要验证Java安装,打开控制台并执行以下Java命令. OS 任务 命令 W ...

  7. 【洛谷】题解 P1056 【排座椅】

    题目链接 因为题目说输入保证会交头接耳的同学前后相邻或者左右相邻,所以一对同学要分开有且只有一条唯一的通道才能把他们分开. 于是可以吧这条通道累加到一个数组里面.应为题目要求纵列的通道和横列的通道条数 ...

  8. Lua学习笔记（6）: 函数

    Lua的函数 函数用于简化程序,当某些工作需要重复执行的时候就可以使用函数减轻工作量(虽然复制粘贴也行) 语法: function 函数名(参数列表) 函数体 return 返回值 end --结束标 ...

  9. 实现短信超链接调起APP

    因APP推广的需求,需要给APP用户定期发送短信提醒登录使用,为了更好的用户体验在短信内容中嵌入了可以直接打开APP的超链接,下面介绍一下具体的代码实现. 编辑openApp.html文件: < ...

  10. python数据可视化——matplotlib 用户手册入门：pyplot 画图

    参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/pyplot.html#sphx-glr-tutorials-intro ...