jQuery实现彩色的爱心冒泡动画特效源码.zip资源-CSDN文库

共8个文件

png：1个

html：1个

svg：1个

版权申诉

jquery

5 浏览量 2022-11-07 00:24:33 上传评论收藏 68KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现彩色的爱心冒泡动画特效源码.zip （8个子文件）

132687007282718388

jquery-1.7.2.min.js 93KB

index.html 2KB

font_u8lcaa5uh625u3di.eot 12KB

font_u8lcaa5uh625u3di.woff 8KB

font_u8lcaa5uh625u3di.svg 14KB

font_u8lcaa5uh625u3di.ttf 12KB

icon-pao.png 4KB

base.css 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水泡冒泡特效</title> <link href="base.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="pao"> </div> </div> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ paopao(); }); //需要的参数 var pp = { pl : 0, //生成的paopao随机的居左的位置 color : ["ce4f6d","ca4fce","4f82ce","4fce91","ceca4f"], //随机添加的颜色 c : 0, //初始化颜色 step : 500 }; function paopao(){ //添加元素 var html = '<div class="paopao iconfont" style="left: '+ pp.pl + 'px;color: #'+ pp.color[pp.c] +'"></div>'; $(".pao").append(html); //获取颜色 pp.c ++; if(pp.c >= pp.color.length){ pp.c = 0; } pp.pl = Math.round(Math.random()*100/3); //随机位置 //执行动画 $(".paopao").each(function () { if($(this).index()%2 == 0){ pp.step = 100; }else if($(this).index()%3 == 0){ pp.step = 200; }else{ pp.step = 300; } if (!$(this).is(":animated")) { $(this).animate({ //运动 top: "-300px", fontSize: "60px", opacity: "0" }, (500-pp.step)*10, function () { $(this).remove(); //清除元素 }) } }); //定时器 setTimeout(paopao,pp.step); } </script> </body> </html>

评论收藏

内容反馈

版权申诉