注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery彩色心形冒泡动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-04-01
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] +'">&#xe60d;</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>