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. 【BZOJ4008】[HNOI2015]亚瑟王

    [BZOJ4008][HNOI2015]亚瑟王 题面 bzoj 洛谷 题解 由期望的线性性 可以知道,把所有牌打出的概率乘上它的伤害加起来就是答案 记第$i$张牌打出的概率为$fp[i]$ 则 $$ ...

  2. virsh常用维护命令

    virsh常用命令 一些常用命令参数 [root@kvm-server ~]# virsh --help                                     #查看命令帮忙 [ro ...

  3. 微信小程序：页面跳转时传递数据到另一个页面

    一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...

  4. python3工作环境部署+spyder3+jupyter notebook

    1.python3安装 1)官网去下载python3.7版本,双击安装,只要注意勾选写到PATH就行,其它直接NEXT. 2)安装完成,CMD键入 python 回车,跳出python界面就是成功. ...

  5. C#--Switch Case语句的返回

    C#中switch case语句的返回不只是用break关键字,break语句是用来阻止贯穿的最常见的方式.也可以用其他语句来替代它.如下面代码所示 static int Main(string[] ...

  6. 在CentOS 7下编译安装Nginx+PHP+MySQL环境

    本文转载自:http://www.softeng.cn/?p=156,本文已获得作者授权,未经作者同意,不可转载. 1.前言 本文适合于已经对Linux操作系统具有基本操作经验,并且能够在Linux或 ...

  7. 网络基础知识-bps、Bps、pps的区别

    在计算机科学中,bit是表示信息的最小单位,叫做二进制位:一般用0和1表示.Byte叫做字节,由8个位(8bit)组成一个字节(1Byte),用于表示计算机中的一个字符.bit(比特)与Byte(字节 ...

  8. 05-Docker架构详解

    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...

  9. 《图解 HTTP 》阅读 —— 第二章

    第2章 简单的http协议 http 协议用于客户端和服务器端的通信. 请求访问文本或图像等资源的一端称为客户端,提供资源响应的一端称为服务器端. 请求报文: 响应报文: 为了能够处理大量的事务,ht ...

  10. 【坚持】Selenium+Python学习之从读懂代码开始 DAY1

    学习Selenium+Python已经好几个月了,但越学发现不懂的东西越多. 感觉最大的问题还是在于基础不扎实,决定从头开始,每天坚持读代码,写代码. 相信量变一定能到质变!!! 2018/05/09 ...