百度云盘　　传送门　　密码: 0ihy

点赞按钮动画效果：

(点击一次随机生成一颗小爱心，作为点赞动画~)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>jQuery点赞按钮动画特效代码</title>

 <style type="text/css">

    img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }

    .btn{ width: 100px; height: 30px; border:0; background: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }

</style>

</head>

<body>

<div class="demo"></div>

<input id="btn1" type="button" class="btn" value="Gary" />

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function () {

   $("#btn1").click(function(){

        var x = 100;

        var y = 900;

        var num = Math.floor(Math.random() * 3 + 1);

        var index=$('.demo').children('img').length;

        var rand = parseInt(Math.random() * (x - y + 1) + y); 

        $(".demo").append("<img src=''>");

        $('img:eq(' + index + ')').attr('src','images/'+num+'.png')

        $("img").animate({

            bottom:"800px",

            opacity:"0",

            left: rand,

        },3000)

   })

})

</script>

</body>

</html>

index.html

实现过程：

三张资源图片就能实现的点赞动画效果

　　　　

　　设置图片和按钮样式

<style type="text/css">

    img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }

    .btn{ width: 100px; height: 30px; border:0; background: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }

</style>

　随机选中其中一长图片

    var num = Math.floor(Math.random() * 3 + 1);

　让生成图片出现在随机位置值

var rand = parseInt(Math.random() * (x - y + 1) + y)

　设置图片透明度和生成位置

        $("img").animate({

            bottom:"800px",

            opacity:"0",

            left: rand,

        },3000)

　为按钮添加点击事件

$(function () {

   $("#btn1").click(function(){

        var x = 100;

        var y = 900;

        var num = Math.floor(Math.random() * 3 + 1);

        var index=$('.demo').children('img').length;

        var rand = parseInt(Math.random() * (x - y + 1) + y); 

        $(".demo").append("<img src=''>");

        $('img:eq(' + index + ')').attr('src','images/'+num+'.png')

        $("img").animate({

            bottom:"800px",

            opacity:"0",

            left: rand,

        },3000)

   })

})

js.append() ：使用函数在指定元素的结尾插入内容

　　$(".demo").append("<img src=''>")点击按钮后生成图片


js.attr() ：函数返回选择元素的属性值

　　$('img:eq(' + index + ')').attr('src','images/'+num+'.png')随机选中一章心形特效产生

 
 jQuery animate() ：animate() 方法执行 CSS 属性集的自定义动画
　　opacity：设置一个元素的透明度级别
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

JS框架_(JQuery.js)点赞按钮动画的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  3. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  4. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  5. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  6. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  7. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  8. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  9. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. CVE-2018-20169漏洞学习

    简介 在4.19.9之前的Linux内核中发现了一个问题.USB子系统在读取与驱动程序/ USB /core/usb.c中的_usb_get_extra_descriptor相关的额外描述符时错误地检 ...

  2. hive报错java.sql.SQLException: null, message from server: "Host '192.168.126.100' is not allowed to connect to this MySQL server"

  3. js截取字符串相关的知识点

    截取字符串中的数字 1.使用parseInt() var str ="4500元"; var num = parseInt(str); console.log(num);//450 ...

  4. python 短信邮件

    短信邮件 hashlib​- md5:非对称加密,不可逆的,经常用于加密密码然后存储​- 示例:​ ```python import hashlib ​ # 创建hash对象,可以指定需要加密的字符串 ...

  5. vue开大主要难点解决方式

    问题:在我们那vue开发项目时,多层嵌套组件最繁琐,组件传参成最难的问题,并且对兄弟组件传参也无能为力,也会导致代码很难维护. 解决:采用vuex状态管理,把所有的事件和状态都储存在store对象中, ...

  6. Java 计算两点间的全部路径（二）

    一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable { ...

  7. OpenSSL源码简介

    1.X.509标准 x509是由国际电信联盟(ITU-T)制定的数字证书标准:包含公钥和用户标志符.CA等: x509是数字证书的规范,P7和P12是两种封装形式:X.509是常见通用的证书格式.所有 ...

  8. Linux使用Docker启动Elasticsearch并配合Kibana使用,安装ik分词器

    注意事项 这里我的Linux虚拟机的IP地址是192.168.1.3 Docker运行Elasticsearch容器之后不会立即有反应,要等一会,等待容器内部启动Elasticsearch,才可以访问 ...

  9. 免费使用Google

    这里需要借助一下`梯子`,这里有教程 点击进入 如果没有谷歌浏览器,进入下载最新版谷歌浏览器,进入下载,不要移动它的安装位置,选择默认位置, 如果已经安装了谷歌浏览器,打开赛风之后,选择设置 进行安装 ...

  10. SQL SERVER 中 sp_rename 用法

    转自:http://www.cnblogs.com/no7dw/archive/2010/03/04/1678287.html 因需求变更要改表的列名,平常都是跑到Enterprise manager ...