Приветствую дорогой читатель Блога RS! Сегодня у блога небольшой праздник, ему исполнилось два месяца. Многое еще не достигнуто, у блога почти нулевые показатели, но это не страшно, всему свое время... Сегодня у меня появилась небольшая идея, так сказать подарить небольшой подарок, а именно выложить полезный, на период зимы, скриптик. Вы могли заметить, что на блоге появились маленькие падающие снежинки. Именно этим скриптиком я и хочу поделиться с Вами! Написан скрипт на jquery, поэтому для работы Вам понадобится эта библиотека.
Я выложу Вам скрипт, поясню каждую строчку и в конце поста дам Вам архив с тестовой страничкой. Приступим Как работает этот скрипт? Все довольно просто. Скрипт генерирует случайную позицию для изображение снежинки, и вставляет это изображение в тег body. После чего запускается другой скрипт, который отвечает за движение изображения с верху вниз. Как только изображение доходит до самого низа окна браузера, картинка удаляется. Вот скрипт генерации изображения:
window.onload = function()
{
snow(1);//Запустить функцию после загрузки страницы
}
function snow(id)//Название функции, так же указан id который будет всегда меняться
{
var pos_x = Math.random()*(99 - 1)+1;//Это строчка генерирует
//число от 1 до 99. олицетворяет собой позицию по оси Х в
//процентах. То есть это стартовая позиция снежинки по горизонтали
pos_x = Math.floor(pos_x);//Эта строчка округляет число до целого
//10 следующих строчек рассчитывают сторону падения. то есть
//куда снежинка будет падать влево
//или вправо. Так же выбирается изображение снежинки
//(переменная png_sh)
if(pos_x >= 1 & pos_x <= 10){var q = -10;var png_sh = 1;}
if(pos_x > 10 & pos_x <= 20){var q = 10;var png_sh = 0;}
if(pos_x > 20 & pos_x <= 30){var q = -10;var png_sh = 1;}
if(pos_x > 30 & pos_x <= 40){var q = 10;var png_sh = 0;}
if(pos_x > 40 & pos_x <= 50){var q = -10;var png_sh = 1;}
if(pos_x > 50 & pos_x <= 60){var q = 10;var png_sh = 1;}
if(pos_x > 60 & pos_x <= 70){var q = -10;var png_sh = 0;}
if(pos_x > 70 & pos_x <= 80){var q = 10;var png_sh = 0;}
if(pos_x > 80 & pos_x <= 90){var q = -10;var png_sh = 1;}
if(pos_x > 90 & pos_x <= 99){var q = 10;var png_sh = 0;}
var end_x = pos_x+q;//Рассчитывается окончательная точка
//назначения изображения.
//Создается изображения с рассчитанной стартовой позицией
var img="<img id='snow_"+id+"' style='left:"+pos_x+"%; top:-10%; position:fixed;' src='img/show_"+png_sh+".png'/>";
$("#contein").append(img);//Вставляем в тег body с генерированное
//изображение
move_show(id,end_x);// Запускаем функцию отвечающую за
//движение
id++;//Прибавляем к идентификатору единицу, для того чтобы
//id изображение не повторялись
setTimeout("snow("+id+");",500);//Перезапускам генерацию
//снежинок каждые пол секунды (500 миллисекунд)
}
function move_show(id,end_x)//Функция движения
{
//Двигаем изображение до позиции top 150% и left ...% снежинка
//будет падать в течение 20 секунд
$("#snow_"+id).animate({top:"150%",left:""+end_x+"%"},20000,function()
{
$("#snow_"+id).empty().remove();//После того как
//снежинка приземлилась в самый низ, удаляем ее
});
}
Давайте добавим немного конкретики, может поможет разобраться в скрипте.
if(pos_x > 10 & pos_x <= 20){var q = 10;var png_sh = 0;}
Так как 12 больше 10 но меньше 20. По этому условия определятся переменная q и png_sh.
<img id='snow_1' style='left:12%; top:-10%; position:fixed;' src='img/show_0.png'/>
Даю Вам архив, скрипт лучше брать от туда, он там чище без комментариев Если есть какие то вопросы, проблемы пишите помогу! Скрипт падающих снежинок
На по следок хочу сказать что скрипт будет работать только если вы в теге body пропишите id = "contein" На сегодня у меня все, удачи Вам!
Автору спасибо за хороший скрипт. А звуковыми скриптами не
занимаетесь ? Можно его послушать у меня на сайте. Пыхтелкин.
Мигающей графики на втором сайте не будет.
Буду рад любому обратному почтовому адресу.
Пыхтелкин.
http://bratmos777.blogspot.com/2011/12/blog-post_17.html