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

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2005   →
 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
Автор
ImHoster.net

Статистика

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

JavaScript (JScript), PHP, Perl - полезные советы


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

Программирование на JavaScript
Выпуск № 33
Cайт : SoftMaker.com.ru
Архив рассылки : SoftMaker.com.ru
Количество подписчиков : 12262
В этом выпуске
От автора

Здравствуйте уважаемые подписчики !

Я рад сообщить вам, что выпуск данной рассылки возобновлен. Я – ее новый ведущий Вахтуров Виктор Викторович.

Тематика рассылки, конечно же, остается прежней – программирование на Java Script. Пока в рассылке будет вестись одна постоянная рубрика: "Java Script solutions". В ней будут публиковаться готовые решения различных (как типовых, так и нетривиальных) задач с примерами кода на Java Script. В дальнейшем планируется создать еще несколько интересных разделов.

Поскольку я, как автор, заинтересован в вашем внимании, предлагаю вам присылать мне свои пожелания относительно содержания рассылки. Если Вы хотите видеть здесь новую рубрику, раздел, или считаете, что в рассылке было бы актуально рассмотреть какую либо тему – пишите. Помните, что я всегда рад вашим письмам.

На сегодня я подготовил несколько не очень сложных скриптов с пояснениями, которые и предлагаю вашему вниманию.

С уважением, Вахтуров Виктор.

P.S. Наверно, многим будет небезынтересен дискуссионный лист "Скрипты для сайта". Данный дискуссионный лист посвящен поиску и обмену, тестированию готовых скриптов на PHP, Perl, JavaScript, VBScript, C/C++, Python, tcl, и других языках. Здесь можно поделиться ссылками на интересные скрипты, или ресурсы, посвященные написанию скриптов, попросить помощи в поиске или выборе нужного скрипта, попросить совета в его написании.

P.P.S. Поздравляю всю мужскую половину аудитории рассылки с наступающим Днем Защитника Отечества ! Желаю всем счастья и творческих успехов.
Java Script solutions

Анимированное 3D "Logo"

Наверно, любой человек, хоть немного знакомый с Интернетом, знаком также и с разнообразными графическими эффектами, применяемыми web-мастерами для оформления сайтов. Примененные "к месту" динамические изображения смотрятся иногда очень эффектно. Для создания таких эффектов используются различные приемы. Это может быть просто анимированное изображение в формате GIF (gif-файл c несколькими кадрами изображения), flash-анимация, либо внедренная видеозапись (в двух последних случаях необходима активизация Active-X объекта в web-документе). Все вышеперечисленные техники обладают достаточно существенным недостатком – большим объемом загружаемых данных. Однако многие интересные эффекты могут быть реализованы достаточно простым способом - на языках сценариев. Тем самым можно добиться существенного ускорения загрузки страниц, сохранив необходимые элементы динамического оформления.

Приведенный ниже скрипт реализует "псевдо трехмерную", вращающуюся в "горизонтальной" плоскости надпись. Такой эффект можно использовать для оформления header-а страниц сайта. Смотрится это достаточно интересно. К тому же код весьма мал по объему.

Честно сказать, идея подобного эффекта принадлежит не мне. Как то давно я видел где то что то подобное. Но идеи, как известно, не патентуются. И специально для сегодняшнего выпуска я подготовил свою реализацию, которую и привожу здесь.

Ниже я привел код скрипта, уже внедренный в html-документ. Можно попросту скопировать все содержимое следующего блока в новый файл и тут же испытать скрипт на работоспособность.

Код: 

<html>

<head>

<script language="JavaScript">
<!--

// Coded by Victor V. Vakchturov (http://softmaker.com.ru)

var nXPos          = 135;
var nYPos          = 60;
var nWidth         = 120;
var nHeight        = 35;

var nFontSizeMin   = 3;
var nFontSizeMax   = 16;

var strText        = 'Расылка "Java Script" на Subscribe.ru  ';

var fAlpha         = 0.0;

function GetLogoItem(nItem)
{
   return document.getElementById("Logo_" + nItem.toString(16));
}

function InitLogo()
{
   var nLen = strText.length;

   for(var i = 0; i < nLen; i++)
   {
      document.write('<div id="Logo_' + i.toString(16) +
                     '" style=""visibility:" hidden;">' +
                     strText.charAt(i) + '</div>');

      var oDiv = GetLogoItem(i);

      if(oDiv)
      {
         oDiv.style.position       = "absolute";
         oDiv.style.top            = 0;
         oDiv.style.left           = 0;
         oDiv.style.width          = 14;
         oDiv.style.height         = 14;
         oDiv.style.textAlign      = "center";
         oDiv.style.verticalAlign  = "middle";
         oDiv.style.fontFamily     = "Times New Roman";
         oDiv.style.fontSize       = "14px";
         oDiv.style.fontWeight     = "bold";
         oDiv.style.color          = "red";
         oDiv.style.cursor         = "default";
      }
   }

   window.setInterval('OnTimer()', 40);
}

function OnTimer()
{
   var nLen    = strText.length;
   var dfAlpha = 360 / nLen;

   for(var i = 0; i < nLen; i++)
   {
      var oDiv = GetLogoItem(i);

      if(oDiv)
      {
         var nTop = nYPos + nHeight * Math.sin(fAlpha -
                    i * dfAlpha * Math.PI / 180);

         oDiv.style.top  = nTop;
         oDiv.style.left = nXPos + nWidth * Math.cos(fAlpha -
                           i * dfAlpha * Math.PI / 180);

         oDiv.style.fontSize = ((nTop - nYPos + nHeight) /
                                (2 * nHeight)) * (nFontSizeMax -
                                 nFontSizeMin) + nFontSizeMin;

         oDiv.style.visibility = "visible";
      }
   }

   fAlpha += 0.02;
}

// -->
</script>

<style>

BODY
{
   margin       : 0px;
   padding      : 0px;

   background   : white;
}

DIV.header
{
   margin       : 0px;
   padding      : 0px;

   height       : 70px;
   border       : 1px solid #336699;

   background   : #CCCCCC;
}

</style>

</head>


<body>

<div class="header"></div>

<script language="JavaScript">
<!--
InitLogo();
// -->
</script>

</body>

</html>

Для начала рассмотрим общие принципы работы. Они достаточно просты.

Для каждого символа строки, содержимое которой предстоит "вращать", в дереве документа генерируется отдельный элемент DIV, включающий этот символ в качестве своего внутреннего текста. Для каждого сгенерированного элемента DIV устанавливается абсолютное позиционирование, позволяющее задавать положение блока в документе путем установки свойств его стиля top и left. Каждый элемент DIV имеет уникальный атрибут ID, определяемый простым правилом. Далее для окна документа устанавливается таймер. В функции-обработчике событий таймера происходит "перебор" всех сгенерированных элементов DIV с установкой для каждого из них очередной позиции и размера шрифта. Таким образом достигается необходимый эффект анимации.

Теперь подробнее.

В самом начале скрипта определяются и задаются значения нескольких переменных. Изменение этих значений позволяет настроить скрипт по вашему желанию.

Значения переменных nXPos и nYPos - это значения центра эллиптической траектории, по которой должны двигаться символы строки.

Переменные nWidth и nHeight определяют величину растяжения эллипса вдоль осей координат. Эти переменные равны половине длины горизонтальной и вертикальной осей эллипса соответственно.

nFontSizeMin и nFontSizeMax задают минимальный и максимальный размер шрифта (в пикселях) при "максимальном удалении" и "максимальном приближении", соответственно, текста относительно зрителя (этим как раз и реализуется "псевдо трехмерность").

Переменная strText как, наверно, уже понятно, хранит саму строку "анимируемого" текста.

--- * ---

Скрипт содержит всего 3 функции.

Функция InitLogo.

Здесь выполняется генерация элементов DIV (как это было описано выше). Для каждого добавленного элемента устанавливается ряд свойств стиля.

Здесь следует подчеркнуть два момента:

  • элементы создаются со свойством visibility, установленным в hide.
    То есть изначально текст не виден. Это сделано для устранения эффекта кратковременного появления скопления символов в углу страницы перед стартом анимации.
  • Свойство ID каждого элемента установлено в значение вида Logo_XXX, где XXX - шестнадцатеричное число-номер символа строки strText, который будет содержаться в блоке.
Далее производится установка таймера путем вызова метода setInterval объекта window.


Функция OnTimer.

Фактически это функция-обработчик событий таймера. В ней выполняется основная работа по "анимации", а именно - размещение элементов DIV, сгенерированных в функции InitLogo вдоль эллиптической траектории, задание для них свойства размера шрифта, а также наращивание значения переменной fAlpha (начальный угол при построении эллипса).

Значения свойств top и left (координаты левого верхнего угла блока) элементов DIV рассчитываются исходя из параметрического уравнения эллипса. Здесь же свойство visibility каждого элемента устанавливается в "visible" (как указывалось выше, при создании элементов оно было установлено в "hidden").

Все элементы перебираются в цикле. Для получения ссылки на соответствующий объект по его номеру используется функция GetLogoItem.


Функция GetLogoItem.

Как уже было сказано, функция GetLogoItem используется для получения ссылки на элемент DIV, сгенерированный функцией InitLogo по его "порядковому номеру". Она просто конкатенирует конвертированный в строку номер, переданный ей в качестве параметра, с префиксом "Logo_" и возвращает результат выполнения метода getElementById объекта document, используя полученную строку в качестве ID элемента.

Пожалуй, это все комментарии к данному скрипту. Поэкспериментируйте с установкой значений переменных nXPos, nYPos, nWidth, nHeight, nFontSizeMin, nFontSizeMax и свойств color, fontFamily, fontWeight в функции InitLogo для адаптации скрипта к своим web-страницам.


Кроссбраузерное воспроизведение фоновой мелодии

Как известно, браузеры MS Internet Explorer и Opera поддерживают HTML тег BGSOUND (расширение Microsoft стандарта HTML 3.2), позволяющий воспроизводить фоновый звук на web-странице. К сожалению, другие об этом теге не знают. Однако есть документированный способ внедрения в документ других документов разных типов. Это достигается с помощью тегов OBJECT или EMBED. Ниже приведен небольшой и очень простой скрипт для решения данной проблемы.

Принцип его действия прост: в строке, идентифицирующей пользовательский агент (получаемой из свойства userAgent объекта navigator) производится поиск подстрок, характерных для различных браузеров. В зависимости от используемого браузера, в документе генерируется либо элемент BGSOUND (для IE и Opera), либо элемент EMBED (для всех остальных пользовательских агентов).

URL звукового файла задается в строке strSound. Скрипт приведен уже внедренным в HTML документ.

Код: 

<html>

<head>
<script language="JavaScript">
<!--

// Coded by Victor V. Vakchturov (http://softmaker.com.ru)

var strSound = "a.mid";

function ActivateSound()
{
   var str = navigator.userAgent;

   if((str.indexOf("MSIE") > -1) || (str.indexOf("Opera") > -1))
       str = '<BGSOUND SRC="' + strSound +
             '" LOOP="INFINITE" VOLUME="0">';
   else
       str = '<EMBED SRC="' + strSound +
             '" AUTOSTART="TRUE" VOLUME="100" ' +
             'LOOP=TRUE style=""visibility:" hidden; ' +
             'display: none;">';

   document.write(str);
}

// -->
</script>
</head>

<body>

<script language="JavaScript">
<!--
ActivateSound();
// -->
</script>

</body>

</html>

Справедливости ради отмечу, что тег EMBED работает, конечно же, и в IE (просто звук проигрывается стандартным проигрывателем, внедренным как Active-X объект). Также EMBED по-разному ведет себя в других браузерах. Та же Mozilla предлагает либо скачать файл, либо проиграть его в Winamp. Во всяком случае, данный скрипт неплохо демонстрирует методику генерации различного содержимого документа в зависимости от используемого пользователем браузера.


"Бегущая" строка состояния

И последний пример сегодня. Он реализует классическую "бегущую строку" - движущийся текст в строке состояния браузера (где эта строка есть, например в IE и Mozilla).

Он состоит всего из двух функций:

StartStatusAnimation

Она устанавливает начальное значение переменной statusText (текст, который будет "бежать") в строке состояния. И запускает таймер, обработчиком событий которого является функция UpdateStatusText.

UpdateStatusText

В ней производится установка текста строки состояния (свойство status объекта window) и циклический "сдвиг" всей строки statusText на один символ влево.

Код скрипта приведен ниже:

Код: 

<html>

<head>
<script language="JavaScript">
<!--

// Coded by Victor V. Vakchturov (http://softmaker.com.ru)

var statusText;

function UpdateStatusText()
{
   window.status = statusText;
   statusText = statusText.substring(1, statusText.length) +
                statusText.substring(0, 1);
}

function StartStatusAnimation()
{
   statusText = 'Расылка "Java Script" на Subscribe.ru !!!' +
                '           ';
   window.setInterval('UpdateStatusText()', 100);
}

//-->
</SCRIPT>
</head>

<body>

<script language="JavaScript">
<!--
StartStatusAnimation();
//-->
</SCRIPT>

</body>

</html>

Пожалуй, на сегодня - все. Заканчиваю выпуск и желаю всем подписчикам всего самого доброго. Надеюсь, номер оказался не бесполезным для вас.

Автор выпуска: Вахтуров Виктор.
Всего доброго. До встречи в следующем номере.
Любой из материалов, опубликованных в этой рассылке, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: comp.soft.prog.javascript		 Отписаться
В избранное