jQuery彩色心形冒泡动画特效

jQuery彩色心形冒泡动画特效是一款五颜六色的心形图标向上浮动动画特效代码。

js代码

<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>