下雨或下雪的效果

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>
原文地址:https://www.cnblogs.com/vali/p/5709669.html