Работа с мышиным курсором в JavaScript. Часть третья.

Сегодня мы продолжим издеватся над несчастным мышиным курсором и попытаемся создать эффект «волшебной палочки», из которой сыплются частицы «волшебной пыли».

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

В основе работы даного эффекта заложены в общем-то всё те же принципы, о которых мы говорили в прошлых частях статьи (см. Работа с мышиным курсором в JavaScript: часть первая, часть вторая), а именно запуск в бесконечном цикле функции, которая распределяет координаты самих частиц в зависимости от изменяемых «внешних условий», тоесть, в даном случае, координат мыши.

Однако, кроме уже известых вам приёмов, из сегодняшнего примера можно извлечь и кой-чего нового.

Например, если вы уже смотрели на код скрипта, то возможно заметили, что одним из задаваемых в начале работы скрипта параметров является количество отображаемых и обрабатываемых частиц. Это сделано для экономии памяти и процессорного времени на слабых машинах (ну, типа сотых пней, потому как на более старших компутерах скрипт должен работать без проблем с установками по умолчанию).

Итак, а как же можно выводить разное количество картинок, изображаюших частицы? Ведь мы привыкли, что все картинки, с которыми работает скрипт, задаются изначально в HTML’е и каждой из них присваивается уникальный ID, чтобы можно было обращатся к ним из скрипта... Но, на самом деле, JavaScript не был бы собой, если бы не позволял нам выводить непосредственно HTML-код. И он, естественно, это позволяет.

Для добавления в документ HTML-тегов в JavaScript’е существует объект document.body.innerHTML. Используется он примерно так:

document.body.innerHTML += <текст с HTML-тегами>;

Вообще, свойства innerText и innerHTML есть во всех текстовых елементах страницы. Тоесть в елементах типа <P>,<DIV>,<SPAN>,<B>,<BLOCKQUOTE> и прочих.

Ну, а теперь взглянем на соответствующий кусок кода в нашем скрипте:

...
  for (var i=0; i <= maxElemCount; i++)
  {   		
    img = '<img src="images/' + (i%3) + '.gif" 
    id="elem_' + i + '" style="position:absolute;
    width:'+elWidth+'px;height:'+elHeight+'px">';	
    
    document.body.innerHTML += img;
    
    ...
    ...
  }
  

Как видите, здесь в цикле (количество итераций которого, естественно, равно числу отображаемых елементов) составляется HTML-тег, изображающий одну частицу, в имя файла этого тега падает одно из заранее занесенных в масив значений имен файлов картинок, также устанавливается ID елемента на основе текущего i. После этого созданный тег добавляется в HTML-поток тела документа.

Ещё можно упомянуть систему, которая управляет движеним частиц (вообщем-то, основную часть программы). Скрипт оперирует с составленными при инициализации массивами, куда занесены координаты частиц, их направление (представленное парой значений x- и y-смещений на каждом «проходе» функции), а также время жизни каждой частицы.

Таким образом (при рассмотрении для одной частицы), процесс выглядит примерно так: при наступлении своего часа, частица «вылетает» (её начальные координаты устанавливаются равными координатам мыши в даный момент, также иницализируюся значения смещений, то есть выбирается направление и скорость её движения, обнуляется счетчик её времени жизни), частица живёт (двигается с заданными параметрами до истечения времени жизни, или выхода за некоторое пороговое расстояние от курсора). После истечения срока жизни частицы, она перемещается в «загробную жизнь» (в заэкранную область, в четверть с отрицательными x и y координатами, где ожидает очередного «рождения» в рабочей, положительной четверти).

При каждом проходе функции эти действия происходят N раз, где N - количество частиц.

Ну, вообщем-то, вот и все премудрости работы сегодняшнего «волшебного» скрипта. Остальные приемы, использованные в скрипте вам уже вполне знакомы и останавливатся на них смысла скорее всего нет. В случае чего, читайте комментарии в самом тексте, файлик “readme”, или, если совсем туго, обращайтесь в ящик.

Удачи в скриптовании!

25.07.2004