百度云盘　　传送门　　密码: 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. PHP 时间转几分几秒

    public static function timetodate($c){ if($c < 86400){ $time = explode(' ',gmstrftime('%H %M %S', ...

  2. 从入门到自闭之Python自定义模块

    自定义模块 定义:一个文件就是一个模块(能被调用的文件,模块就是一个工具箱,工具就是函数) 作用: 将代码文家化管理,提高可读性,避免重复代码 拿来就用(避免重复造轮子),python中类库比较多,提 ...

  3. python-day43(正式学习)

    目录 复习 今日内容 字段操作 多表关系 外键 一对一:无级联关系 一对一:有级联关系 一对多 多对多 复习 """ 1.数据库的配置:my.ini [mysqld][m ...

  4. Linux-1.2关机重启reboot，shutdown

    关机重启:reboot,shutdown reboot 重启操作系统 shutdown -r now 重启,shutdown会给其他用户提示

  5. Nginx启动错误 Failed to read PID from file /run/nginx.pid 的处理方法

    问题产生原因 因为 nginx 启动需要一点点时间,而 systemd 在 nginx 完成启动前就去读取 pid file 造成读取 pid 失败 解决方法 让 systemd 在执行 ExecSt ...

  6. 使用@ResponseBody输出JSON

    添加jackson依赖 添加@ResponseBody 测试: 原理: 当一个处理请求的方法标记为@ResponseBody时,就说明该方法需要输出其他视图(json.xml),SpringMVC通过 ...

  7. 一文搞懂网络知识，IP、子网掩码、网关、DNS、端口号

    网络的基本概念 客户端:应用 C/S(客户端/服务器) B/S(浏览器/服务器) 服务器:为客户端提供服务.数据.资源的机器 请求:客户端向服务器索取数据 响应:服务器对客户端请求作出反应,一般是返回 ...

  8. win7-32位安装mysql-5.7.27

    下载 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 参考链接 https://blog.csdn.net/qq_41307443/a ...

  9. 2019-11-29-asp-dotnet-core-通过图片统计-csdn-用户访问

    title author date CreateTime categories asp dotnet core 通过图片统计 csdn 用户访问 lindexi 2019-11-29 08:26:58 ...

  10. UltraEdit中的特殊字符

    以下特殊字符,可以在替换中用到, ^n--换行 ^t--Tab