'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'});
转载于:https://www.cnblogs.com/wpp12345/p/5853022.html
相关资源：JAVA上百实例源码以及开源项目
