jQuery-点击按钮弹出心形动画效果 - 苏飞论坛

上传

点击文件名下载附件

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)