Отправляет email-рассылки с помощью сервиса Sendsay

Введение в Behaviors

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 618 RSS
←   Декабрь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.webber.ru
Открыта: 11-11-2002

Автор
Олег Тарабрин

Статистика

618 подписчиков
0 за неделю
←   Все выпуски   →

Введение в Behaviors


Информационный Канал Subscribe.Ru

Выпуск 6

Поздравляю всех подписчиков рассылки Введение в поведения с наступающим Новым Годом. В сегодняшнем выпуске приведен листинг и атрибуты достаточно простого поведения, которое реализует известный эффект снегопада. Желающие посмотреть на работающий html-компонент могут посмотреть выпуск 6 на сайте. Итак, листинг html-компонента (snow.htc):

<public:component>
 <public:attach event="oncontentready" onevent="event_oncontentready()" />
 <public:method name="event_interval" />
 <script language='jscript'>
  var snow_dx = 1; var snow_dy = 3;
  var snow_rx = 3;
  var snow_ry = 3;
  var last_added  = 0;
  var snow_count  = 30;
  var snow_image  = new Image;
  var snow_items  = new Array();
  function move_snow()
  {
   var img;
   var temp;
   var nx,ny;
   for (temp=0; temp < snow_count & snow_items[temp] != "";temp++)
   {
    img = element.document.all(snow_items[temp])
    ny = img.offsetTop + snow_dy + Math.floor(Math.random()*snow_ry);
    nx = img.offsetLeft + snow_dx + Math.floor(Math.random()*snow_rx);
    if (ny >element.clientHeight-snow_image.height-5)
     ny = clientTop+10;
    if (nx > element.clientWidth-snow_image.width-5)
     nx = clientLeft+24;
    img.style.top = ny+"px";
    img.style.left = nx+"px";
   }
  }
  function add_snow()
  {
   var img;
   if (last_added < snow_count && Math.random()>0.7)
   {
    img = element.document.createElement("IMG");
    img.src = snow_image.src;
    img.id = "snow"+last_added;
    img.style.top = 10+"px"
    img.style.left = Math.floor(element.offsetWidth*Math.random())+"px";
    img.style.position = "absolute";
    snow_items[last_added] = img.id;
    last_added += 1;
    element.insertBefore(img);
   }
  }

  function event_interval()
  {
   add_snow();
   move_snow();
  }

  function init()
  {
   var temp;
   var rate = 100;
   for (temp = 0;temp<snow_count;temp++)
   snow_items[temp] = "";
   if (element.getAttribute("snowRate") != null)
    rate = element.snowRate;
   setInterval(event_interval,rate);
  }

  function event_oncontentready()
  {
   snow_image.onload = init;
   if (element.getAttribute("snowSrc") != null)
    snow_image.src = element.snowSrc;
   else
    snow_image.src = "snow.gif";
   if (element.getAttribute("snowCount") != null)
    snow_count = element.snowCount;
   if (element.getAttribute("snowDX") != null)
    snow_dx = element.snowDX;
   if (element.getAttribute("snowDY") != null)
    snow_dy = element.snowDY;
   if (element.getAttribute("snowRX") != null)
    snow_rx = element.snowRX;
   if (element.getAttribute("snowRY") != null)
    snow_ry = element.snowRY;
  }
 </script>
</public:component>

snow.htc

Для примера привожу так же листинг html-документа (snow.html), использующего данный компонент и файл с таблицей стилей (snow.css):

<html>
 <head>
  <link rel="stylesheet" href="snow.css" type="text/css">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>html-компонент &laquo;снег&raquo;</title>
 </head>
 <body snowSrc="snow.gif" snowCount="50" bgcolor=black>

 </body>
</html>

snow.html

body {behavior: url(snow.htc);}

snow.css

Осталось только привести описание атрибутов, используемых html-компонентом.

  • snowSrc - url файла с изображением. Значение по умолчанию равно snow.gif. Если задан не абсолютный, а относительный адрес, то он отсчитвается от положения html-документа, а не положения html-компонента или таблицы стилей. Например, если значением данного свойства является sn.gif, то в качестве снежинок будет использоваться файл sn.gif, лежащий в той же директории что и html-документ.
  • snowCount - количество снежинок. Значение по умолчанию равно 30.
  • snowDX - скорость дрейфа снежинок по горизонтали. Значение по умолчанию равно 1. Положительные значения обозначают дрейф вправо, отрицательный - влево.
  • snowDY - скорость дрейфа снежинок по вертикали. Значение по умолчанию равно 3. Положительные значения обозначают дрейф вниз, отрицательный - вверх.
  • snowRX - верхняя граница для генерации случайных чисел, добавляемых к x-координате снежинок. Значение по умолчанию равно 3.
  • snowRY - верхняя граница для генерации случайных чисел, добавляемых к y-координате снежинок. Значение по умолчанию равно 3.
  • snowRate - частота, с которой движутся снежинки. Фактически определяет скорость движения снежинок. Значение по умолчанию равно 100.
Опрос: Размещение
Где размещать листинги?
На сайте
В рассылке
просмотреть результаты

Тексты этих листингов необходимо скопировать в соответствующие файлы (смотри подписи) и поместить в одну директорию. Так же в директорию необходимо поместить графический файл: snow.gif. Его можно скачать, используя ссылку. В качестве альтернативы можно использовать архив snow.zip, содержащий все файлы, рассмотренные выпуском.


В следующем выпуске мы рассмотрим несколько хитростей, применявшихся в данном html-компоненте. И еще раз - с наступающим Новым Годом.

Архив рассылки

Автор рассылки

P.S. Рассылка создана в первую очередь для читателя, а уже во вторую - что бы потешить самолюбие автора (меня). Так что, если Вам что-то непонятно, или Вы имеете какие-то пожелания, пишите мне.

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное