实现动态效果基本上都是用到定时器，修改标签的位置大小颜色属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

    .zan{

        line-height: 20px;

        width: 20px;

        height: 20px;

        position: relative;

    }

</style>

</head>

<body>

<div style="width: 500px;height: 300px;padding-left: 100px;padding-top: 150px">

<div class="zan">

    <span>赞</span>

</div>

<hr><br>

<div class="zan">

    <span>赞</span>

</div>

<hr><br>

<div class="zan">

    <span>赞</span>

</div>

<hr><br>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    $('.zan').click(function () {

        var top = 0;

        var left = 0;

        var fontSize = 12;

        var opacity = 1;

        var tag = document.createElement('span');

        $(tag).text('+1');

        $(tag).css('position','absolute');

        $(tag).css('float','left');

        $(tag).css('color','blue');

        $(tag).css('top',top + "px");

        $(tag).css('left',left + "px");

        $(tag).css('font-size',fontSize + "px");

        $(tag).css('opacity',opacity);

        $(this).append(tag);

        var obj = setInterval(function () {

            top = top - 5;

            left = left + 5;

            fontSize = fontSize + 5;

            opacity = opacity - 0.2;

            $(tag).css('top',top + "px");

            $(tag).css('left',left + "px");

            $(tag).css('font-size',fontSize + "px");

            $(tag).css('opacity',opacity);

            if(opacity < 0){

                clearInterval(obj);

                tag.remove();

            }

        },100);

    });

</script>

</body>

</html>

　　

jQuery实现点赞动态效果的更多相关文章

  1. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  2. jQuery显示隐藏动态效果的几种写法

    <script type="text/javascript"> $(document).ready(function() {     /*$("#test1& ...

  3. jquery+css 点赞喜欢特效

    百度盘链接 https://pan.baidu.com/s/1Nu8fiUrdffsNd6usTsUESg 密码 mps4 效果:

  4. jQuery动态效果实例

    jQuery常见的动态效果: 隐藏/显示效果: 1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 HTML 元素. (2):隐藏/显示的速度: ...

  5. Python开发【前端】：jQuery

    jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...

  6. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  7. jQuery常见案例

    jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...

  8. Web前端基础——jQuery（三）

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...

  9. jQuery前端第三方框架

    计时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 神州数码RIP协议认证

    实验要求:掌握RIP协议的简单认证及MD5认证 拓扑如下 简单认证 R1 enable 进入特权模式 config  进入全局模式 hostname R1 修改名称 interface s0/1 进入 ...

  2. python学习笔记第二周

    目录 一.基础概念 1.模块 1)os模块 2)sys模块 2.pyc文件 3.数据类型 1)数字 2)布尔值 3)字符串 4.数据运算 5.运算符 6.赋值运算 7.逻辑运算 8.成员运算 9.身份 ...

  3. Pytorch中的Batch Normalization操作

    之前一直和小伙伴探讨batch normalization层的实现机理,作用在这里不谈,知乎上有一篇paper在讲这个,链接 这里只探究其具体运算过程,我们假设在网络中间经过某些卷积操作之后的输出的f ...

  4. ss linux终端配置

    最近ss莫名宕机,懒得重新安装了,就安装了一个非gui版本,安装非gui版本还有一个优点就是在远程服务器的时候可以用proxychains进行终端代理,非常友好实用.下面简单的说一下如何进行终端ss ...

  5. LBS推荐系统的设计方法

    https://www.csdn.net/article/2015-12-24/2826554 http://www.datayuan.cn/article/14797.htm https://my. ...

  6. 错题：Test3

    /** * * @ClassName: test3 * @Description: TODO(请问主程序运行结果是什么?) * @author yk * @date 2017年3月9日 上午11:20 ...

  7. weixin-java-mp集成微信公众号自带客服功能

    电脑端登录公众号管理后台,[添加功能插件]开通客服功能,输入"人工客服"接入客服热线 底部有我的微信二维码,如有问题,可加好友进行技术交流! ​ ​ ​ ​ ​ ​ ​ weixi ...

  8. review

    一.123 第二部分:面向对象 . 谈谈你对面向对象的认识. . 约束 Java: - 接口,约子类中必须包含某个方法(约束). Interface IMessage: def func1(self) ...

  9. （4）MySQL的外键（不同表之间的数据关联）

    问题:下列这张表中部门等列名下输入的数据没有约束,那么可以随便填写符合规则的数据但是不符合实际需求的值,这样就造成了不符合规则的数据在表中存在,外键就是为了解决这个问题,管理员可以在另一张表中设置好符 ...

  10. Centos7修改默认最大文件打开数

    方法一: [root@bogon ~]# vi /etc/systemd/system.conf [root@bogon ~]# cat /etc/systemd/system.conf # This ...