wap红包雨（曲线移动带旋转）

做了好几版本的红包雨，表示很愁人，手机卡顿一直是个大问题，这里整理了一份稍简洁的版本。

1.红包从下向上运动，开始位置随机

2.曲线运动，碰到边缘时自动转弯，并自带旋转效果

3.定义两条线路，不至于看起来太规律

注：可以在此基础上更改相应参数，把定值写成随机值可以看起来更没有规律些，点击事件，点击效果自行定义，定时器使用完记得清除。

依然调用了页面初始化以及px转rem的两个小JS和JQ：

jquery-3.1.0.min.js

希望越来越好，加油。

css:

.redRainWrap{ width:100%; background: #ccc;}
.redRain{ width:100%; position: absolute; z-index: 1; top:0; overflow:hidden }
.envelope{ width: 2.853rem; height: 2.92rem; position: absolute; }
.envelope img{ width:100%; height: auto; position: absolute; top:0;}
.envelope img{-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out}

html:

<div class="redRainWrap">
   <div class="redRain"></div>
   <div class="aaa"></div>
</div>

js:

<script>
   /*变量*/
    var windWidth = $(window).width();
    var windHeight = $(window).height();
    var redRainWrap = $('.redRainWrap');
    var redRain = $('.redRain');
    /*红包参数*/
    var redDefault = {
        num: 25,            //红包个数
        intervalTime: 500,    //红包间隔出现时间
        moveInterval: 7,      //红包间隔移动时间
        moveX: windWidth/100,  //红包每次横向移动距离
        moveY: 6,           //红包每次纵向移动距离
        moveX_andr: 6,       //屏幕小于宽度360px的红包每次横向移动距离
        moveY_andr: 5        //屏幕小于宽度360px的红包每次纵移动距离
    };
    $(function () {
        redRainWrap.css('height',$(window).height());
        $('.redRain').css('height',$(window).height());
        $('.aaa').html('宽：'+windWidth +'高：'+windHeight);
      /*生成红包*/
        redInit(redDefault.num);
    });
   /*循环生成固定数量的红包*/
   function redInit(num) {
        var startMoveTime = 0;
      /*循环生成固定数量的红包*/
        for(var i=0; i<=num;i++){
            var axisX = parseInt(Math.random() * (windWidth-214));//0-750;
            var div = document.createElement("div");
            div.setAttribute('class', 'envelope');
            /*位置*/
            $(div).css('top',windHeight);
            $(div).css('left',axisX);
            /*内容*/
            div.innerHTML = '<img src="img/redRain_package.png">';
            redRain.prepend(div);
        }
        /*红包依次开始移动   内含定时器moveStart，已清除*/
        var j=i;
        var moveStart = setInterval(function () {
            var div = $('.redRain').find('div').eq(j);
            redRainMove(div,axisX);
            j--;
            if(j<=0){
                clearInterval(moveStart);
            }
        },redDefault.intervalTime);
    }
   /*红包移动  注：内含定时器timer 定时器在移动结束1s后清除*/
    function redRainMove(div,axisX){
        var divImg = div.find('img');
        var redWidth = div.width();
        var goRight = false;
        var myRotate = 'rotate(0deg)';
        var x = axisX;
        var y = windHeight;
        var tempX = redDefault.moveX;
        var tempY = redDefault.moveY;
        if(windWidth<=360){
            tempX = redDefault.moveX_andr;
            tempY = redDefault.moveY_andr;
        }
        var timeInt = redDefault.moveInterval+Math.random() *5;
        var mymove = 'translate3d('+x+'px,'+y+'px,'+'0)';
      /*两条线路*/
        if(x%2 == 0){ goRight = true; }
        var timer = setInterval(function(){
         /*到达左边界*/
            if(x<=Math.random()*30){
                goRight = true;
                myRotate = 'rotate(30deg)';
            }
         /*到达右边界*/
            else if(x>=(windWidth-redWidth-Math.random()*30)){
                goRight = false;
                myRotate = 'rotate(-30deg)';
            }
            y -= tempY;
         /*向左还是向右*/
            if(goRight){ x+=tempX;/*向右*/ }
            else{ x-=tempX; /*向左*/}
            $(divImg).css({
                'transform':myRotate,
                '-moz-transform':myRotate,
                '-ms-transform':myRotate,
                '-o-transform':myRotate,
                '-wbkit-transform':myRotate
            });
            div.css('top',y);
            div.css('left',x);
            if(y<0){
                setTimeout(function () {
                    clearInterval(timer);
                },1000);
            }
        },timeInt);
    }
   /*移除div 根据div的top值去移除相应的DIV 定时器redRemove,已清除*/
    var redRemove = setInterval(function () {
        var red = $('.redRain').find('div');
        var len = red.length;
        for(var i=0; i<=len-1;i++){
            var redT = red.eq(i).offset().top;
            if(redT<0){
                red.eq(i).remove();
                if(i == 1){
                    setTimeout(function () {
                        clearInterval(redRemove);
                    },1000);
                }
            }
        }
    },1000);
</script>