Приветствую Вас Гость • Регистрация • Вход
Понедельник, 16.12.2019
Главная » 2013 » Ноябрь » 28 » Падающие снежинки с помощью jQyery
20:01
Падающие снежинки с помощью jQyery

Здравствуйте читатели и подписчики моего блога.
Снова рад Вас видеть!
Так как скоро наступают праздники,мне захотелось как то украсить свой блог зимним настроением,добавить снежки на сайт.
Перебрав кучу тупых и кривых скриптов JavaScript,которые никак не хотели работать в системе юкоз,я нашел для себя выход иным способом,установить это все дело с помощью jQuery.Как это все дело сделать мы сейчас и рассмотрим.
Для начало нам нужно скачать картинки снежинок для нашего падающего снега.Я использовал картинки в формате png,вы можете использовать свой формат,как png так и gif,на ваше усмотрение.Если Вас устроит мой формат то картинки вы можете скачать по этой ССЫЛКЕ Если нет,качаете свои,те которые вам понравились,остается только лишь прописать путь к вашим картинкам в скрипте.Но не забываем,при этом названия ваших картинок должны будут называться 0-1-2-3.png;gif,так прописано в скрипте(об этом ниже)
И так мы скачали наши картинки снежинок,теперь приступим к внедрению самого скрипта.
Первым делом нам нужно будет прописать между тегами
Код
<head>...</head>
Код
<div id="snow"></div>
Дальше мы подключим библиотеку jQuery
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Ну и последний шаг нам нужно сделать сам скрипт снежинок и подключить его.
Создаем файл JS с таким содержимым и сохраняем его как snow.js
Для него и картинок я создал отдельную папку snow,и все поместил туда.
Код
window.onload = function()
{
snow(1);
}
function snow(id)
{
  var pos_x = Math.random()*(99 - 1)+1;
  pos_x = Math.floor(pos_x);
  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 = 3;}
  if(pos_x > 20 & pos_x <= 30){var q = -10;var png_sh = 0;}
  if(pos_x > 30 & pos_x <= 40){var q = 10;var png_sh = 2;}
  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 = 3;}
  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 = 2;}
  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 = 3;}
  var end_x = pos_x+q;
  var img="<img id='snow_"+id+"' style='left:"+pos_x+"%; top:-10%; position:fixed;' src='snow/show_"+png_sh+".png'/>";
  $("#snow").append(img);
  move_show(id,end_x);
  id++;
  setTimeout("snow("+id+");",100);
}
function move_show(id,end_x)
{
  $("#snow_"+id).animate({top:"150%",left:""+end_x+"%"},20000,function()
  {
  $("#snow_"+id).empty().remove();
  });
}
Все теперь подключаем наш скрипт в тело сайта.У меня все прописано в Страницы сайта после тегов
Код
<head>...</head>
Код
<script type="text/javascript" src="snow/snow.js"></script>
И вот оно чудо,снежинки начали падать.
Теперь немного пояснений
var png_sh = 1;
var png_sh = 2;

Это название наших картинок
src='snow/show_"+png_sh+".png'
Это путь к нашим картинкам
Ну а кому совсвем в лом парится с кодами,можно просто поставить этот код в Страницы сайта,зайдя через админку-управление дизайном-страницы сайта
Код
<div id="snow"></div>
<script type="text/javascript" src="http://xn--b1afke0ah.xn--p1ai/snow/snow.js"></script>
Категория: Система uCoz | Просмотров: 1179 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика