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

<!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. Eclipse下SpringBoot没有自动加载application.properties文件

    Eclipse内创建SpringBoot项目,在java/main/resources文件夹下面创建application.properties配置文件,SpringApplication.run后发 ...

  2. elementUI 日期 周一、周二、周三、周四、周五、周六、周日快捷键

    <el-date-picker v-model="ruleForm.pickDateMeal" type="daterange" align=" ...

  3. 地理空间数据云--TM影像下载

    实验要用到遥感影像,,TM,,之前是可以在美国USGS上下载的,但是要FQ了,有点麻烦,, 想到之前本科实在地理空间数据云平台下载的,就试了一下以前的账号,完美!,, TM数据很丰富,到2017年的都 ...

  4. 增加临时表空间组Oracle11g单实例

    #需求,测试库与生产库,临时表空间同步一致 #经过查询生产环境,数据库默认临时表空间,为临时表空间组,有三个成员,三个临时表空间,每个临时表空间一个数据文件,自动扩展 #使用临时表空间组的优点,减少不 ...

  5. iproute2 与 net-tools

    https://linux.cn/article-4326-1.html https://blog.csdn.net/astrotycoon/article/details/52317288 如今很多 ...

  6. hdoj 2159 (带限制的完全背包）

    #include <iostream> #include <algorithm> #include <cstring> using namespace std; ] ...

  7. 2018.4.23 git删除已经add的文件

    使用 git rm 命令即可,有两种选择, 一种是 git rm --cached "文件路径",不删除物理文件,仅将该文件从缓存中删除: 一种是 git rm --f " ...

  8. C++学习（十四）（C语言部分）之 数组

    上期回顾:三大循环 for while do while (循环体至少会执行一次)四大跳转 goto continue(提前跳出当前循环 进入下一个循环) break(跳出本次循环) return(跳 ...

  9. canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

    canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) ...

  10. CF使用TGP下载后，分卷文件损坏的解决方法

    首先从游戏的列表删除游戏(安装失败出现分卷文件损坏的游戏) 然后进入游戏重新,继续找到该游戏(安装失败的游戏) 点击下载游戏!不会重新下载的,之后下载一些失败的文件,不会花费多少时间,慢慢等待即可 之 ...