更新一下 我的红包雨

Posted 2020-08-07 吴盼盼

\'use strict\';
(function($){
    //红包初始化
    var redEnvelope_defaults = {
        imgSize_width: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);
    }
})($);

View Code

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

执行开始：

.rain-wrap{

　　width:100%;

　　height:100%;

}

.envelope{
     width: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\'});