苏飞论坛

标题: jQuery-点击按钮弹出心形动画效果 [打印本页]

作者: xyc 时间: 2021-7-8 14:44
标题: jQuery-点击按钮弹出心形动画效果
   今天咱们来说说一个常见的点击按钮弹出不同颜色的心形图的动画效果。直接上代码，有需要的可直接拿走不谢！
   效果：
   (, 下载次数: 7)

   css样式：

[CSS] 纯文本查看 复制代码

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

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

HTML：

[HTML] 纯文本查看 复制代码

<div class="conts"></div>

<button id="btnOn" type="button" class="btn">点击</button>

js代码：

[JavaScript] 纯文本查看 复制代码

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

                var x = 100;       

                var y = 900;  

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

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

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

                

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

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

                $("img").animate({

                        bottom:"800px",

                        opacity:"0",

                        left: rand,

                },3000)

                

   })

以上就是实现的全部的代码了，如需源码，请点击》》 (, 下载次数: 0)

作者: 范范 时间: 2021-7-8 14:51
支持楼主

欢迎光临苏飞论坛 (http://www.sufeinet.com/)