jQuery彩色心形冒泡动画特效是一款五颜六色的心形图标向上浮动动画特效代码。
js代码
<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
paopao();
});
//需要的参数
varpp={
pl:0,//生成的paopao随机的居左的位置
color:["ce4f6d","ca4fce","4f82ce","4fce91","ceca4f"],//随机添加的颜色
c:0,//初始化颜色
step:500
};
functionpaopao(){
//添加元素
varhtml='<divclass="paopaoiconfont"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;
}elseif($(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>
下载
|
|
置顶卡
变色卡