Блогу два месяца!

 

Приветствую дорогой читатель Блога 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();//После того как
//снежинка приземлилась в самый низ, удаляем ее
});
}

Давайте добавим немного конкретики, может поможет разобраться в скрипте.

  • После загрузки страницы запускается функция snow(1);
  • Происходит генерация числа от 1 до 99. к примеру с генерировалось число 12.3667893
  • После идет округление числа, в нашем примере до 12
  • Далее срабатывает условие:
if(pos_x > 10 & pos_x <= 20){var q = 10;var png_sh = 0;}

Так как 12 больше 10 но меньше 20. По этому условия определятся переменная q и png_sh.

  • Далее рассчитывает окончательная позиция по горизонтали, а именно end_x = 12+10; то есть 22. И того мы получаем что наша снежинка будет по началу на позиции top:-10% left:12% а двигаться она будет в точку top:150% left 22% надеюсь понятно
  • Генерируется изображение
<img id='snow_1' style='left:12%; top:-10%; position:fixed;' src='img/show_0.png'/>
  • Помещается в тег body
  • Запускается функция move_show(id,end_x).
  • Изменяется id
  • Осуществляется перезапуск функции show каждые 500 миллисекунд
  • Функция move_show(id,end_x). двигает изображение сверху вниз и удаляет изображение по окончанию процесса


Заключение

 

Даю Вам архив, скрипт лучше брать от туда, он там чище без комментариев Если есть какие то вопросы, проблемы пишите помогу! Скрипт падающих снежинок

На по следок хочу сказать что скрипт будет работать только если вы в теге body пропишите id = "contein" На сегодня у меня все, удачи Вам!

 

Комментарии (7)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Джони, 07 Декабря 2011 г. 17:51 пишет:
Гость
Неплохо, поставлю себе тоже, только вот немного сайт ускорю, а то и так притормаживает
Helen, 08 Декабря 2011 г. 10:12 пишет:
Гость
Добрый день. Спасибо за скрипт. Где-то можно посмотреть пример его работы? Чтобы проверить корректность отображения в различных браузерах.
Rio-Shaman, 08 Декабря 2011 г. 11:02 пишет:
Автор
Ну во первых у меня на блоге используется этот скрипт, а во вторых в архиве есть тестовая страница.
Viktor, 08 Декабря 2011 г. 22:00 пишет:
Гость
Очень интересная и полезная информация, беру себе на заметку.
Автору спасибо за хороший скрипт. А звуковыми скриптами не
занимаетесь ? Можно его послушать у меня на сайте. Пыхтелкин.
Rio-Shaman, 08 Декабря 2011 г. 22:03 пишет:
Автор
Нет, такими скриптами не увлекаюсь... По причине того, что большинство веб дизайнеров отказываются от звукового сопровождения и мигающей графики в своих проектах, так как это негативно действует на аудиторию
Viktor, 17 Декабря 2011 г. 22:06 пишет:
Гость
Алексей, рад был видеть на своем сайте ссылку на эту страницу.
Мигающей графики на втором сайте не будет.
Буду рад любому обратному почтовому адресу.

Пыхтелкин.
Вадим, 18 Декабря 2011 г. 22:33 пишет:
Гость
Улучшить загрузку
http://bratmos777.blogspot.com/2011/12/blog-post_17.html
Ответ для пользователя: Джони