Code

this.browser.scrollTop = function () { return (document.body.scrollTop); }

this.browser.scrollLeft = function () { return (document.body.scrollLeft); }

this.browser.min_x=1;

this.browser.min_y=1;

if(navigator.appName.indexOf("Internet Explorer")!=-1) {

this.browser.max_x=document.body.clientWidth;

this.browser.max_y=document.body.clientHeight;

// позиционирование для IE

this.setPositionXY = function (x,y) {

var x=x||this.x;

var y=y||this.y;

this.div.style.pixelLeft=x;

this.div.style.pixelTop=y;

}

} else {

this.browser.max_x=self.innerWidth;

this.browser.max_y=self.innerHeight;

// позиционирование для FireFox

this.setPositionXY = function (x,y) {

var x=x||this.x;

var y=y||this.y;

this.div.style.left=x+'px';

this.div.style.top=y+'px';

}

}
В отдельный метод calc() выделим все вычисления новых координат снежинки. В принципе, формулу для траектории снежинки можно взять любую — мы за основу выбрали синусоидальную (фрагмент кода «Новые координаты»).

Code

// вычисляем новое положение

this.calc = function (x,y,dx,dy) {

var dx=dx||this.deltaX;

var dy=dy||this.deltaY;

// вычисление новой координаты

x=x+dx*Math.sin(this.browser.max_y-this.browser.min_y-this.start_y);

y=y+dy;

// проверка по диапазону

if (x>this.browser.max_x) x=this.browser.min_x;

if (x<this.browser.min_x) x=this.browser.max_x;

if (y<this.browser.min_y) y=this.browser.max_y;

if (y>this.browser.max_y) y=this.browser.min_y;

return({'x':x,'y':y});

}

.

Code

// перемещаем снежинку

this.move = function () {

var new_pos=[];

// уточним текущее положение снежинки и очистим его от скроллинга

var x=Math.floor(this.x — this.browser.scrollLeft());

var y=Math.floor(this.y — this.browser.scrollTop());

// вычислим новое положение снежинки

new_pos=this.calc(x,y);

// вернём смещение

this.x=new_pos['x']+this.browser.scrollLeft();

this.y=new_pos['y']+this.browser.scrollTop();

this.setPositionXY(this.x,this.y);

if (!this.div.width) {this.div.width=this.div.offsetWidth;this.browser.max_x-=this.div.width;this.browser.min_x+=this.div.width;}

if (!this.div.height) {this.div.height=this.div.offsetHeight;this.browser.max_y-=this.div.height;this.browser.min_y+=this.div.height;}

}

Но нам нужно будет переместить снежинку не один раз. JavaScript позволяет вызывать определенное действие (функцию) по истечении заданного промежутка времени — с помощью стандартного метода setTimeout объекта window.
Мы создадим еще один метод, который перемещает снежинку и затем вызывает сам себя через время, заданное в параметре this.speed. Время у нас измеряется в миллисекундах.

Code

this.step = function () {

this.move();

window.setTimeout(this.handler+".step()",this.speed);

}
Итак, устанавливаем снежинку на старт и добавляем подготовленный контейнер к документу. Затем плодим и размножаем снежинки, то есть получаем экземпляры объекта snowflake и кладем их в один большой массив.

Снежинки у нас будут разные:

Скорость передвижения и интервал между перемещениями будем выбирать случайно.

Этот фрагмент кода — в листинге «Снегопад начинается».

Code

var snowflakes = [];

for (var i=0; i< 5; i++) {

snowflakes[i]=new snowflake();

snowflakes[i].imgSrc=(['snow1.gif','snow.gif'])[Math.floor(Math.random()*2)];

snowflakes[i].speed=([60,90,120])[Math.floor(Math.random()*3)];

snowflakes[i].draw();

snowflakes[i].start();

}

for (var i=5; i< 15; i++) {

snowflakes[i]=new snowflake();

snowflakes[i].imgSrc='snow2.gif';

snowflakes[i].speed=([20,40])[Math.floor(Math.random()*2)];

snowflakes[i].draw();

snowflakes[i].start();

}

for (var i=15; i< 30; i++) {

snowflakes[i]=new snowflake();

snowflakes[i].speed=([20,50,90])[Math.floor(Math.random()*3)];

snowflakes[i].draw = function () {

this.div.innerHTML="*";

this.div.style.color=(["#9DFFCD","#FFB99D","#F7FF9D"])[Math.ceil(Math.random()*3-1)];;

this.div.style.fontSize=([30,50,90])[Math.ceil(Math.random()*3-1)];

}

snowflakes[i].draw();

snowflakes[i].start();