百度云盘　　传送门　　密码: 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. MySQL 如何更改某一用户及伞下成员的path

    MySQL  如何更改某一用户及伞下成员的path 在有的系统中,推荐关系的维护不只是pid那么简单,为了某些业务,可能还会需要维护path字段,path字段的存在,优点在于查询方便,最起码不用递归了 ...

  2. python基础数据类型和初级应用

    1.整数: int -- 计算和比较 2 -- 10 推位 8421 20 21 -- 2**7 10 - 2 bit_length 二进制的有效占用位数 # 123 # 计算和比较 # 14 0 # ...

  3. JavaSE--异常机制

    异常就是程序在运行时出现的不正常情况.发生在运行时期,java程序在运行时期发生的不正常情况,此时java就按照面向对象的思想对不正常现象进行描述和对象的封装.异常的由来:问题也是现实生活中一个具体的 ...

  4. Asp.net4.5未在web服务器上注册

    在使用vs2012打开项目时,显示Asp.net4.5未在web服务器上注册?是由于没有下载一个补丁的原因,只需下载安装补丁 VS11-KB3002339.exe 下载地址:https://downl ...

  5. 导出excel模版

    方法一: public void ToExcel(){ //第一步:获取模版物理路径 string file_1 = Server.MapPath("/Content/Excel/downE ...

  6. 编写 Bash 补全脚本

    编写 Bash 补全脚本   对于Linuxer来说,自动补全是再熟悉不过的一个功能了.当你在命令行敲下部分的命令时,肯定会本能地按下Tab键补全完整的命令,当然除了命令补全之外,还有文件名补全. B ...

  7. CF1151F Sonya and Informatics

    cf luogu 我们最终要的序列一定是前面全是0,后面全是1,假设总共\(m\)个0,那么这等价于前\(m\)位0的个数为\(m\).当然一开始可能数量没有\(m\) 那就把前\(m\)位0的数量作 ...

  8. 定义一个javascript库的兼容标准

    1. 定义一个库的兼容标准, 比如说是ie6+? 还是ie8+? 还是ie9.2. 原生知识储备,至少你不完整的读过一个库的代码.3. DOM操作和事件上的问题更多的是hack技巧,并不是算法,也不是 ...

  9. Hybrid APP架构设计

    通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...

  10. idea自动抽取变量快捷键设置

    file---setting---keymap---搜索variable 如下图:默认是ctrl+alt+v,这里修改成自己比较方便的快捷键即可,我这里设置的是alt+e