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. 洛谷2612&&bzoj2817 [ZJOI2012]波浪

    洛谷2612&&bzoj2817 [ZJOI2012]波浪 原题链接 题解 因为有abs不太好搞,考虑拆掉abs. 生成排列的方法之一:n个空位,从1到n一次插入一个空位. 这样搞的话 ...

  2. 【linux报错】-bash: xhost: command not found

    参考自:http://blog.csdn.net/csdnones/article/details/51513163,感谢原作者解决了我的问题. 执行xhost +,报以下错误,原因是因未没有安装相关 ...

  3. C#课后小作业

    有关C#基础的练手 跟大家一起分享下 1.让用户输入一个100以内的数 打印1-100之间所有的数,用户输入的数除外 2.让用户输入一个100以内的数 打印1-这个数之间所有的数的和 3.使用一个fo ...

  4. MapPartition和Map的区别

    在Spark中有map和mapPartitions算子,处理数据上,有一些区别 主要区别: map是对rdd中的每一个元素进行操作: mapPartitions则是对rdd中的每个分区的迭代器进行操作 ...

  5. linux ——使用find如何快速替换所有相同参数

    在生成环境上有时候需要大规模修改某一配置里的参数,但是该参数存在多个地方,比如IP地址 端口 项目名等,特别是项目名称混乱想统一 find  /项目地址 -type f |xargs grep &qu ...

  6. Amazon及其亏本诱饵策略还能坚持多久？

    Amazon 刚刚公布了最新的财报,亏损 4100 万美元.这是这家电子商务巨头连续 5 个季度以来的第 3 次亏损.但是华尔街似乎却一片叫好声,当日 Amazon 的股价也涨了近 8 个点达 359 ...

  7. 大前端-全栈-node+easyui+express+vue+es6+webpack+react

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 视频来源:https://www.bil ...

  8. 软工实践-Alpha 冲刺 （6/10）

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 已经解决登录注册等基本功能的界面. 完成了主界面的基本布局 ...

  9. 福大软工1816：Beta（3/7）

    Beta 冲刺 (3/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 参与开发关键词提醒部分 展示GitHu ...

  10. spring框架（3）— spring集合类的注入

    1.Car.java package com.eniac.beans; public class Car { private String type; private String factory; ...