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

<!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. 原生WebGL绘制3个点

    <html> <body> <canvas width = "300" height = "300" id = "my_ ...

  2. 关于Linux前后台进程切换

    前言: 当使用SSH远程登录服务器时,对于运行时间较长的程序(如Caffe的训练可能需要十几个小时), SSH可能会在很长时间后断掉,导致程序没运行完就中断了. 为了解决这个问题,需要将在服务器运行的 ...

  3. url的反向解析

    1. url的语法格式: url(regex, views, **kwargs, name) name:为地址起别名,反向解析时使用 2.反向解析 对于Django中的url反向解析,是分模板和视图的 ...

  4. java实现各种排序算法

    java实现各种排序算法 import java.util.Arrays; public class SomeSort { public static void main(String[] args) ...

  5. CSU 1588 合并果子

    Description 现在有n堆果子,第i堆有ai个果子.现在要把这些果子合并成一堆,每次合并的代价是两堆果子的总果子数.求合并所有果子的最小代价. Input 第一行包含一个整数T(T<=5 ...

  6. 纯js常用的代码

    1.获取表单中某属性的值 var name = document.myform.myname.value; 2.表单提交时校验,相应js代码中需要返回true或者false <form name ...

  7. Maven 整理总结（一）

    使用maven来,今天对maven的使用进行一下总结.总经过程中,参考到的资料,我会尽量列举在下面,如果有涉及侵权的问题,挺联系我,我立即改正. 孤傲苍狼博客 http://www.cnblogs.c ...

  8. idea使用的JDK版本1.9换成1.8后相关的更改设置

    File——>Project Structure 一.查看Project中的jdk 1.检查Project SDK:中jdk 版本是否为1.8版本 2.检查Project language le ...

  9. java中的数据结构

    1.链表的使用 使用时需要import java.util.List 和 java.util.ArrayList //返回list中的元素个数 int size(); //判断list中是否包含元素, ...

  10. IP、端口号、MAC

    1.端口 端口是TCP/IP协议簇中,应用层进程与传输层协议实体间的通信接口.端口是操作系统可分配的一种资源:应用程序通过系统调用与某端口绑定后,传输层传给改端口的数据都被相应进程接收,相应进程发给传 ...