| | | | |||
|
|||
|
|
|||
Главная  Программирование Java Управление внешним видом элементов страницы |
|||
Управление внешним видом элементов страницыОглавлениеУправление внешним видом элементов страницы Страница 2 Страница 3 Страница 4 Страница 4 из 4 Пример Пример Web-страницы с абзацем, имеющим мерцающую рамку: <HTML> <HEAD> <TITLE>Мерцающая рамка</TITLE> <SCRIPT TYPE="text/javascript"> var isBlinked = false; function borderBlink() { var pObject = document.all["p"]; if (isBlinked) { pObject.style.borderLeftColor = "#0000FF"; pObject.style.borderTopColor = "#0000FF"; pObject.style.borderRightColor = "#0000FF"; pObject.style.borderBottomColor = "#0000FF"; } else { pObject.style.borderLeftColor = "#FF0000"; pObject.style.borderTopColor = "#FF0000"; pObject.style.borderRightColor = "#FF0000"; pObject.style.borderBottomColor = "#FF0000"; } isBlinked = !isBlinked; } </SCRIPT> </HEAD> <BODY> <P ID="p" STYLE="border: thin solid #0000FF">y меня мерцающая рамка!</Р> <SCRIPT TYPE="text/javascript"> window.setlnterval("borderBlink()", 2000); </SCRIPT> </BODY> </HTML> Здесь, чтобы обозначить состояние, в котором находится мерцающая рамка абзаца, мы также использовали переменную isBlinked, хранящую логическое значение. И по возможности будем делать впредь. Народ предупреждает! Свойства объекта style, задающие цвет, возвращают различные значения в зависимости от программы Web-обозревателя. В случае Internet Explorer и Opera возвращается значение вида #rrggbb, a Firefox вернет значение rgb(RR, GG, BB), где rr, gg и BB — доля, соответственно, красной, зеленой и синей составляющей в цвете. И здесь пресловутая несовместимость Web-обозревателей!.. Решение 2 Использование универсального объекта AnimatedEiement (листинг 5.1). Его конструктор имеет следующий формат вызова: AnimatedEiement(<Элемент страницы>, <Интервал>, [<Массив выражений>]); Первым параметром в конструктор передается экземпляр объекта, соответствующий элементу страницы, к которому мы хотим применить анимационный эффект. Второй параметр задает интервал времени в секундах (секунды нам все-таки привычнее). Тут все нам уже знакомо еще по методу setinterval объекта window. А теперь— внимание! Третий параметр конструктора представляет собой массив строк, каждая из которых содержит выражение JavaScript. Все эти выражения будут выполняться после истечения интервала: сначала — выражение, содержащееся в первой строке-элементе массива, потом — во второй строке, далее — в третьей, в четвертой и, наконец, в последней; затем снова будет выполнено выражение в первой строке, и круг замкнется. Таких выражений в массиве может быть задано сколько угодно, но присутствовать должны хотя бы два. Объект AnimatedElement имеет два метода, которые можно использовать в сценариях: start — запуск анимационного эффекта; stop — остановка анимационного эффекта. Оба метода не принимают параметров и не возвращают результата. Остальные методы и свойства этого объекта использовать не рекомендуется, т. к. объект может повести себя непредсказуемо. Если же понадобится изменить анимационный эффект, лучше всего уничтожить экземпляр объекта, создающего этот эффект, и создать его заново, с другими параметрами. Народ предупреждает! Перед уничтожением экземпляра объекта AnimatedEiement следует вызвать метод stop этого объекта. Листинг 5.1. Объект AnimatedElement, создающий простейший анимационный эффект для элемента страницы // Счетчик созданных к данному времени экземпляров объекта // AnimatedEiement var jsps_AE_counter = 0; // Список всех созданных к данному времени экземпляров объекта // AnimatedElement var jsps_AE_list = new Array(); /./ Функция-конструктор function AnimatedElement(pElement, plnterval, pSt) { this.element = pElement; this.interval = plnterval * 1000; this.actions = new Array(); for (var i = 0; i < pSt.length; i++) this.actions[i] = pSt[i]; this.start = mjspsAEStart; this.stop = mjspsAEStop; this.timer = null; this.actionNumber = 0; // Номер данного экземпляра объекта в списке jsps_AE_list this.myNumber = jsps_AE_counter; // Заносим данный экземпляр объекта в список jsps_AE_list jsps_AE_.list [jsps_AE_counter] = this; // Увеличиваем счетчик экземпляров этого объекта на единицу, // подготавливая его для создания нового экземпляра jsps_AE_counter++; this.start(); } // Функция, реализующая метод start. Заметим, что мы передаем в функцию // jspsAEDoAction, выполняющую очередное из заданных выражений, номер // данного экземпляра объекта AnimatedElement. Это нужно, чтобы данная // функция смогла получить к нему доступ function mjspsAEStart() { this.timer = window.setlnterval("jspsAEDoAction(" + 'bthis.myNumber.toString() + ")", this.interval); } // Функция, реализующая метод stop function mjspsAEStop() { if (this.timer) window.clearlnterval(this.timer); this.timer = null; } // Функция, выполняющая очередное из заданных выражений. Для доступа // к данному экземпляру объекта AnimatedElement она использует // список jsps_AE_list и передаваемый ей единственным параметром номер // экземпляра этого объекта function jspsAEDoAction(myNumber) { var my = jsps_AE_list[myNumber]; eval(my.actions[my.actionNumber]); if (my.actionNumber >= my.actions.length - 1) my.actionNumber = 0 else my.actionNumber++; } Хорошая идея! Поместите объявление этого объекта в файл сценариев animatedelement.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега: <SCRIPT SRC="animatedelement.js"></SCRIPT> Пример Переделанный пример Web-страницы с абзацем, имеющим мерцающую рамку: <HTML> <HEAD> <TITLE>Анимационный эффект</TITLE> <SCRIPT SRC="animatedelement.js"><SCRIPT> <!-- Предполагается, что объявление объекта AnimatedElement было помещено в файл сценариев animatedelement.js --> <SCRIPT TYPE="text/javascript"> function btnOnClick() { var btnTriggerObject = document.all["btnTrigger"]; if (btnTriggerObject.value == "Мерцать!") { anobject.start(); btnTriggerObject.value = "He мерцать!"; } else { anObject.stop(); btnTriggerObject.value = "Мерцать!"; } } </SCRIPT> </HEAD> <BODY> <P ID="p" STYLE="border: thin solid #0000FF">y меня мерцающая рамка!</Р> <FORM> <INPUT TYPE="button" ID="btnTrigger" VALUE="He мерцать!"ONCLICK="btnOnClick();"> </FORM> <SCRIPT TYPE="text/javascript"> var pObject = document.all["p"]; function doMyAction(colorString) { pObject.style.borderLeftColor = colorString; pObject.style.borderTopColor = colorString; pObject.style.borderRightColor = colorString; pObject.style.borderBottomColor = colorString; } var anObject = new AnimatedElement(pObject, 2, new Array("doMyAction('#FF0000');", "doMyAction('#00FF00');", "doMyAction('#0000FF');")); </SCRIPT> </BODY> </HTML> « Пред. - След. |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||
