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

点赞按钮动画效果：

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>jQuery点赞按钮动画特效代码</title>
  6.  
  7.  <style type="text/css">
  8.     img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
  9.     .btn{ width: 100px; height: 30px; border:0; background: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }
  10. </style>
  11.  
  12. </head>
  13. <body>
  14. <div class="demo"></div>
  15. <input id="btn1" type="button" class="btn" value="Gary" />
  16.  
  17. <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  18. <script type="text/javascript">
  19. $(function () {
  20.  
  21.    $("#btn1").click(function(){
  22.         var x = 100;
  23.         var y = 900;
  24.         var num = Math.floor(Math.random() * 3 + 1);
  25.         var index=$('.demo').children('img').length;
  26.         var rand = parseInt(Math.random() * (x - y + 1) + y); 
  27.  
  28.         $(".demo").append("<img src=''>");
  29.         $('img:eq(' + index + ')').attr('src','images/'+num+'.png')
  30.         $("img").animate({
  31.             bottom:"800px",
  32.             opacity:"0",
  33.             left: rand,
  34.         },3000)
  35.  
  36.    })
  37. })
  38. </script>
  39.  
  40. </body>
  41. </html>

index.html

实现过程：

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

　　　　

　　设置图片和按钮样式

  1. <style type="text/css">
  2.     img{ width: 20px; height: 20px; position: absolute; bottom: 100px; left: 50%; margin-left: -10px; }
  3.     .btn{ width: 100px; height: 30px; border:0; background: #EE4000; color: #fff; position: absolute; bottom: 100px; left: 50%; margin-left: -50px; }
  4. </style>

　随机选中其中一长图片

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

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

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

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

  1.         $("img").animate({
  2.             bottom:"800px",
  3.             opacity:"0",
  4.             left: rand,
  5.         },3000)

　为按钮添加点击事件

  1. $(function () {
  2.  
  3.    $("#btn1").click(function(){
  4.         var x = 100;
  5.         var y = 900;
  6.         var num = Math.floor(Math.random() * 3 + 1);
  7.         var index=$('.demo').children('img').length;
  8.         var rand = parseInt(Math.random() * (x - y + 1) + y); 
  9.  
  10.         $(".demo").append("<img src=''>");
  11.         $('img:eq(' + index + ')').attr('src','images/'+num+'.png')
  12.         $("img").animate({
  13.             bottom:"800px",
  14.             opacity:"0",
  15.             left: rand,
  16.         },3000)
  17.  
  18.    })
  19. })

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. redis在php中实际应用-list

    1.LPUSH Redis Lpush 命令将一个或多个值插入到列表头部. 如果 key 不存在,一个空列表会被创建并执行 LPUSH 操作. 当 key 存在但不是列表类型时,返回一个错误.(在Re ...

  2. 2019年8月22日 星期四（怎样成为PHP大牛）

    1.服务器方面,各种PHP部署方案烂熟,Lvs,keepalived,nginx,apache,docker,换句话说其战力值相当于一个高级运维,迅速定位并排除PHP运行中的各种问题. 2.数据库方面 ...

  3. 房地产大佬潘石屹推荐学Python编程，这本从0到1就够了

    潘石屹推荐学Python编程,很多人都不相信,他的微博真真切切. 连房地产都开始学Python了,因为要听懂机器,让机器为我所用. 再不学习Python真的晚了!!!! 如何学? 怎么学? 还是推荐高 ...

  4. Jenkins安装部署及使用

    Jenkins安装部署环境如下 PS:中文官网,东西比较全.(居然有中文官网了,真好!)以下为本人自己的使用过程,仅供参考! 一.准备阶段 1.组件及版本: Jenkins版本:2.164.3 操作系 ...

  5. C# 面向对象6 之前的复习

    复习练习 THIS:调用当前类的构造函数

  6. 预约系统（四） 管理页面框架搭建easyUI

    Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...

  7. laravel 5.7 引入Illuminate\Http\Request 在类内调用 Request 提示不存在的问题

    laravel报错: ReflectionException Class App\Http\Controllers\Request does not exist 解决办法: namespace App ...

  8. IAP技术原理

    目录 IAP技术原理 更新记录 IAP与ISP的概念及原理 ISP简介 ISP原理 IAP简介 IAP原理 IAP优势 IAP的设计 1.程序启动流程 2.中断向量表的重定位 3.IAP跳转APP函数 ...

  9. 第十八篇 JS传参数

    JS传参数   参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...

  10. SQL SERVER 中 sp_rename 用法

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