更新一下 我的红包雨

'use strict';
(function($){
    //红包初始化
    var redEnvelope_defaults = {
        imgSize_70,//红包的宽度 px
        _class:'envelope',//红包的样式
        imgEnvSrc:'../images/game/envelopeRain/red_close.png',
    };
    var $envelopeObj = null;
    var Init;
    Init =(function(){
        function Init(element,options){
            this.$settings = $.extend({}, $.fn.redEnvelope.defaults, options);
            this.$element = $(element);
            this.init();
        }
        
        //游戏初始化
        Init.prototype.init = function(){
            if(this.$settings != undefined || this.$settings != null ){
                for(var option in this.$settings){
                    redEnvelope_defaults[option] = this.$settings[option];
                }
            }
            $envelopeObj = this.$element;
            gameInit();
        }
        
        Init.prototype.stop = function(){
            stopGame();
        }
        
        return Init;
    })();
    
    $.fn.redEnvelope = function(options,$arg){
        var retrunValue = null;
        this.each(function(){
            var $me = $(this),
            instance = $me.data('redEnvelope');
            if(!instance){
                $me.data('redEnvelope',new Init(this, options));
            }
            if ($.type(options) === 'string') {
                retrunValue = instance[options]($arg);
            }
            if(retrunValue === null){
                return this;
            }else{
                return retrunValue;
            }
        });
    }
    //游戏初始化属性
    $.fn.redEnvelope.defaults = {
        
    };
    var envInterval =null;
    function gameInit(){
        //红包初始化
        envInterval = setInterval(InitEnv,200);
    }
    function InitEnv (){
        var imgEnv = document.createElement('img');
        imgEnv.src = redEnvelope_defaults.imgEnvSrc;
        imgEnv.style.width = redEnvelope_defaults.imgSize_width+'px';
        imgEnv.setAttribute('class',redEnvelope_defaults._class);
        imgEnv.addEventListener('touchend',redEnvelope_defaults.clickFun);
        evnPosition(imgEnv,$envelopeObj);
    }
    function evnPosition (img){
        var containerWidth = $envelopeObj.width();
        var containerHeight = window.screen.height;
        $envelopeObj.prepend(img);
        //红包初始的位置
        var startTop = parseInt(Math.random()*10+(-10))
        var startLeft = parseInt(Math.random()*containerWidth);
        //移动的位置
        var moveLeft = parseInt(Math.random()*containerWidth+(-(containerWidth/2)));
        var time=parseInt(Math.random() * 1000+1200);
        evnAnimation({'startLeft':startLeft, 'startTop':startTop, 'moveLeft':moveLeft,'moveTop':containerHeight},time);
    }
    /*添加元素到主内容上*/
    function evnAnimation (posObject,time){
        $envelopeObj.children('img:first').css({'left':posObject.startLeft,'top':posObject.startTop});
        $envelopeObj.children('img:first').animate(
            {
                'left':posObject.startLeft-posObject.moveLeft,
                'top':posObject.moveTop
            },
            time,
            'linear',
            function(){
                $(this).remove();
            }
        );
    
    }
    function stopGame(){
        clearInterval(envInterval);
    }
})($);

只需要找个红包的图片，写个父类.rain-wrap的样式和红包的样式，红包雨就可以如期而至啦~~~

执行开始：

.rain-wrap{

　　100%;

　　height:100%;

}

.envelope{
     60px;
     height:auto;
     overflow: hidden;
     position: absolute;
     -webkit-user-select: none;
     border:none;
}

$('.rain-wrap').redEnvelope();

可以填点击红包的方法，例：

function clickFun（）{

　　alert(1);

}

$('.rain-wrap').redEnvelope({'clickFun':clickFun});

还可以传递红包的样式：

.envelope1{....}

$('.rain-wrap').redEnvelope({'_class':'envelope1'});

红包的图片途径的改变：

$('.rain-wrap').redEnvelope({'imgEnvSrc':'../envelope.png'});