zoukankan      html  css  js  c++  java
  • 下雨或下雪的效果

    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>
  • 相关阅读:
    兔子数
    忠诚
    mysql字段名与关键字冲突(near "to":syntax error)
    C/C++使用心得:enum与int的相互转换
    ubuntu重新安装 apache2
    ubuntu 删除mysql
    Notepad++ 代码格式化
    linux文件字符集转换(utf8-gb2312)
    字符编码详解——彻底理解掌握编码知识,“乱码”不复存在
    c语言判断是否是utf8字符串,计算字符个数
  • 原文地址:https://www.cnblogs.com/vali/p/5709669.html
Copyright © 2011-2022 走看看