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. CF 1093 E. Intersection of Permutations

    E. Intersection of Permutations 链接 题意: 给定两个序列,询问第一个排列的[l1,r1]和第二个排列[l2,r2]中有多少个共同的数,支持在第二个排列中交换两个数. ...

  2. 关于Python的装饰器（1）

    Python的装饰器的概念,一直有点微妙.之前在StackOverflow上看过一篇感觉说明的很清楚的介绍: *A decorator must accept a function as an arg ...

  3. Ubuntu 安装python后，安装python-dev

    1．通常情况下: sudo apt install python-dev 或者 在 sudo apt install python 命令下安装应该也附带了 python-dev 上述 pyhthon ...

  4. HDU-4055：Number String

    链接:HDU-4055:Number String 题意:给你一个字符串s,s[i] = 'D'表示排列中a[i] > a[i+1],s[i] = 'I'表示排列中a[i] < a[i+1 ...

  5. RabbitMQ各协议异同详解

    一.官网介绍 Which protocols does RabbitMQ support? RabbitMQ supports several messaging protocols, directl ...

  6. OpenLDAP搭建部署

    安装环境: linu系统:      centos7.2版本 OenLDAP:/openldap-2.4.44 下载地址:ftp://ftp.openldap.org/pub/OpenLDAP/ope ...

  7. python-生成器、迭代器、装饰器

    目录 动态语言和静态语言 __slots__ 生成器 迭代器 闭包 装饰器 动态语言和静态语言 动态语言可以在运行的过程中修改代码,例如python在运行的过程中给已创建好的类添加属性和方法. 静态语 ...

  8. python的30个编程技巧

     1.原地交换两个数字 x, y =10, 20 print(x, y) y, x = x, y print(x, y) 10 20 20 10 2.链状比较操作符 n = 10 print(1 &l ...

  9. Linux内核学习笔记（6）-- 进程优先级详解（prio、static_prio、normal_prio、rt_priority）

    Linux 中采用了两种不同的优先级范围,一种是 nice 值,一种是实时优先级.在上一篇粗略的说了一下 nice 值和实时优先级,仍有不少疑问,本文来详细说明一下进程优先级.linux 内核版本为 ...

  10. Linux 150命令之 文件和目录操作命令 chattr lsattr find

    chattr添加隐藏权限 lsattr查看隐藏权限 参数 a文件内容不能删除,只能追加 >> [root@mysql tmp]# chattr +a 1.txt [root@mysql t ...