下雨或下雪的效果
01.声明数组存放雪花,颜色;
02.在页面创建单个;
03.移动方法;
<script>
var rain = {
flake : ['※','☼'],
colors : ['#000'],
// backgroundcolors:['#000'],
maxleft : (document.body.clientWidth||document.documentElement.clientWidth),
maxtop : (document.body.clientHeight||document.documentElement.ClientHeight)+50,
length : 0,
all:[],
//初始化
init:function(){
var self = this;
self.createMore();
self.allmove();
},
//创建单个
createSnow : function(){
var self = this;
var one = $('<div></div>')
var onepic = self.flake[0];
var color = self.colors[0];
one.append(onepic)
one.attr({'id':'s','data-v':self.rand(0,300)+3,'data-t':0})
one.css({
color:color,
top:0,
left:self.rand(0,self.maxleft)+'px',
position:'absolute'
})
$('body').append(one)
return one;
},
//移动
move :function(a){
var self = this;
var left = parseInt(a.offset().left)+self.rand(5,40);
var top = parseInt(a.offset().top)+self.rand(5,20);
left > self.maxleft-300 ? left = 0:'';
top > self.maxtop-300 ? top = 0:'';
console.log(left)
a.css({
'top' :top+'px',
'left':left+'px'
});
},
allmove : function(){
var self = this;
var all =self.all;
setInterval(function(){
for(var i=0;i<all.length;i++){
self.move(all[i])
}
},100)
},
//创建多个
createMore : function(){
var self = this;
var all = self.all;
var l = length + 10;
var timer=setInterval(function(){
for(var i = 0;i<l;i++){
all.push(self.createSnow())
}
if(all.length>10){
clearInterval(timer);
}
},1000)
},
//随机出现
rand : function(min,max){
return min + Math.floor((max - min)*Math.random())+1;
},
}
window.onload =function(){
rain.init();
}
</script>

浙公网安备 33010602011771号