首页 > 代码库 > 更新一下 我的红包雨
更新一下 我的红包雨
‘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 = http://www.mamicode.com/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 =http://www.mamicode.com/== 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{
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‘});
更新一下 我的红包雨
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。