JS框架_(JQuery.js)点赞按钮动画

Posted Cynical丶Gary

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS框架_(JQuery.js)点赞按钮动画相关的知识,希望对你有一定的参考价值。

 

 

百度云盘  传送门  密码: 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)点赞按钮动画的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

JS框架_(JQuery.js)模拟刮奖