JQ实现下雨效果

思路：创建一个类，定义对象，下雨可变的是下雨的地方，速度，高度，定义类可以进行改变。
css代码

* {
	margin:0;
	padding:0;
}
body {
	background:black;
	overflow:hidden;
}
.container {
	width:20px;
	height:60px;
	position:absolute;
}
img{
	width: 10px;
	height: 10px;
}
jq代码

    var w = window.screen.width;
    var h = window.screen.height;
    //记录雨滴的个数
    var count = 0;

    var drop = function() {
    	//下落的数度
        this.v = Math.random() * 1 + 0.5;
        this.left = Math.random() * w;
    }
    //构造函数
    drop.prototype = {
    	//定义构造函数
        constructor: drop,
        //创建雨滴
        create: function() {
            count++;
            var $drop = $('<div class="container"><img src="xue.png"/></div>');
            $drop.appendTo('body');
        },
        
//       运动时离左边的距离, last 和 frist 不同
        addCss: function() {
            $('.container:last').css({
                left: this.left + 'px'
            })
        },
        //下落的速度和时间。
        dropEvent: function() {
            var time = Math.floor(h / this.v);
			time = time+8;
			
            $('.container:last').animate({
                top: h + 'px',
                opacity: '1'
            }, time)
        }
    }
	

	//更新，雨会散，
    function updata() {
        if (count > 200) {

            for (var i = 0; i < 100; i++) {
                $('div:first').remove(); 
            }
            count = 0;
        }
    }
//  50秒进行执行
    setInterval(function() {

        var Drop = new drop();
        Drop.create();
        Drop.addCss();
        Drop.dropEvent();
        updata();
    }, 50)