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. 10_SpringBoot集成TkMybatis插件

    10_SpringBoot集成TkMybatis插件 明天你好向前奔跑 关注  0.5 2018.09.11 11:15 字数 163 阅读 3794评论 0喜欢 3 @Author Jacky Wa ...

  2. Drupal学习(19) 使用jQuery

    本节学习如果在Drupal里交互使用jQuery. jQuery在Drupal是内置支持的.存在根目录的misc目录中. 当调用drupal_add_js方法,会自动加载jQuery. 在Drupal ...

  3. ubuntu18.04安装mongoDB 4.0

    STEP 1:  在终端输入GPK码 $  sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334B ...

  4. 05-Docker架构详解

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

  5. Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发

      PHASERJS3 一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{ ...

  6. POJ-3122(二分算法)

    //题意:这是一个分蛋糕的游戏, t个测试数据,输入n, f n代表的是n块蛋糕,蛋糕的高为1, f代表的是f个人朋友,然后输入每份蛋糕的半径 // 将n块蛋糕分成 f+1 份 每一份都是完成的一块蛋 ...

  7. django中model字段与属性

    model field 类型1.AutoField     一个自增的IntegerField,一般不直接使用,Django会自动给每张表添加一个自增的primary key. 2.BigIntege ...

  8. day09,10 函数

    一.函数 什么是函数 函数: 对代码块和功能的封装和定义 定义一个事情或者功能. 等到需要的时候直接去用就好了. 那么这里定义的东西就是一个函数. 语法: def 函数名(形参): 函数体 函数名(实 ...

  9. Yii2 yii\helpers\ArrayHelper

    yii\helpers\ArrayHelper 是一个数组辅助类,提供额外的数组功能函数 toArray($object, $properties = [], $recursive = true) C ...

  10. Java 通过先序中序序列生成二叉树

    题目 二叉树的前序以及后续序列,以空格间隔每个元素,重构二叉树,最后输出二叉树的三种遍历方式的序列以验证. 输入: 1 2 3 4 5 6 7 8 9 10 3 2 5 4 1 7 8 6 10 9 ...