КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Чертёж одиннадцатый Некоторые объекты JS, половина вторая
|
|
|
|
Когда дизайнер использует Java Script, он может преследовать различные цели. Остановимся на двух, пожалуй, самых распространённых. Во-первых, JS помогает сделать страничку красивой, неординарной, интерактивной, живой. Во-вторых, страничку можно сделать функциональной, разместив на ней Интернет-магазин, программу тестирования или анкетирования, базу данных. В этом случае роль скриптов – обработка данных, введённых посетителем.
Сегодня мы попытаемся разобраться с первым аспектом применения JS, то есть рассмотрим его «оформительские» возможности.
1. Для начала создадим эффектный заголовок нашего сайта. Если ты не забыл, он находится в файле zagol.htm.
c открой этот файл в блокноте;
c применим к заголовку фильтр:
<DIV id=msg style="position:absolute; top:10; left=20;
width=100%; filter:glow(color=#ff88dd, strength=10);">
<H2> Я и мои друзья </H2> </DIV>
Фильтры – это ещё одно «завоевание» CSS. Задаётся фильтр при описании стиля следующим образом:
filter: имя_фильтра (параметр1 = значение1, параметр2 = значение2, …);
Некоторые фильтры:
glow – ореол вокруг объекта.
blur – эффект движения с большой скоростью.
alpha – прозрачность объекта.
chroma – делает прозрачным указанный цвет.
flipH, flipV – горизонтальный и вертикальный зеркальный образ.
invert – негативное изображение.
XRay – «рентгеновский» образ объекта.
Параметры этих фильтров описаны в приложении 2.
Одновременно можно применить несколько фильтров к объекту, записав их через пробел.
c а теперь сделаем так, чтобы ореол вокруг букв пульсировал, то есть, периодически изменялся его размер от 0 до 10. Для этого создадим три js-функции, только запишем их не в сам файл zagol.htm, а в отдельном файле my_script.js. Создай текстовый файл, сохрани его под именем my_script.js в папке my_site и запиши в него текст:
|
|
|
var fi=0;
var d=1;
var tmr;
function start()
{tmr=setInterval("dancing()",100);}
function destroy() {clearInterval(tmr);}
function dancing()
{ msg.filters.glow.strength=fi;
fi+=d;
if ((fi>=10)||(fi<=0)) {d=-d;}
}
c в раздел <HEAD> файла zagol.htm добавь строку:
<SCRIPT src="my_script.js"></SCRIPT>
c и, наконец, добавь атрибуты-события в тег <BODY>:
<BODY bgcolor=#ffddff onload="start()"
onbeforeunload="destroy()" >
Что мы сделали? Начнём с конца. В теге <BODY> мы указали два события: onload (загрузка страницы) запускает функцию start(), onbeforeunload (перед выгрузкой страницы) запускает функцию destroy().
В теге <SCRIPT> мы указали, что все скрипты находятся в файле my_script.js.
В файле my_script.js располагаются:
c раздел объявления переменных, в котором после ключевого слова var следует имя переменной и, если требуется, её начальное значение. Нам потребуются переменные:
fi – размер ореола;
d – направление изменения значения fi. Если d=1, fi увеличивается, если d=-1, fi уменьшается;
tmr – переменная-объект.
c функция start(), в которой создаётся объект таймер командой
tmr=setInterval("dancing()",100);
Этот объект невизуальный, мы его не можем увидеть. Но зато он непрерывно запускает функцию, заданную первым параметром, через промежуток времени, заданный вторым параметром (в миллисекундах). Таким образом, функция dancing запускается 10 раз в секунду.
c функция destroy() «отключает» таймер командой clearInterval().
c функция dancing() состоит из трёх команд. Первая
msg.filters.glow.strength=fi;
задаёт значение величины ореола объекта msg (такой идентификатор мы дали нашему заголовку). Вторая
fi+=d;
увеличивает значение fi на d. А третья
if ((fi>=10)||(fi<=0)) {d=-d;}
проверяет значение fi. Если оно достигло 10 или 0 (операция или обозначается двумя вертикальными линиями ||), направление d меняется на противоположное.
c посмотри, что получилось, а затем добавь ещё один фильтр к заголовку:
<DIV id=msg style="position:absolute; top:20; left=0;
width=100%; filter:glow(color=#ff88dd,
|
|
|
strength=10) chroma(color=#ff0088);">
<H2> Я и мои друзья </H2></DIV>
2. «Хитрый» вопрос: как будет выглядеть заголовок, если к нему применить класс panelka?
3. Если ты хорошо разобрался в предыдущем примере, попробуй сделать так, чтобы на Дусиной страничке при наведении мышки на панель с фото прозрачность краёв фотографии изменялась между 0 и 100.
А это для проверки:
c в файл my_csript.js:
function start_foto()
{tmr=setInterval("foto_alpha()",20);}
function foto_alpha()
{ foto.filters.alpha.finishOpacity=fi;
fi+=d;
if ((fi>=100)||(fi<=0)) {d=-d;}
}
c в файл dusja.htm:
<DIV class=panelka style="position:absolute; right:10;
width:300; height:350; padding:50;"
onmouseover="start_foto()" onmouseout="destroy()" >
<IMG id=foto src=images/dusja1.jpg width=200 height=250
style="filter:alpha(opacity=100,finishOpacity=0,style=3);" >
</DIV>
c и не забудь подключить файл со скриптами my_csript.js к файлу dusja.htm:
<HEAD>
<TITLE>Наша любимица Дуся</TITLE>
<LINK rel=stylesheet type=text/css href=my_style.css>
<SCRIPT src="my_script.js"></SCRIPT>
<SCRIPT type=text/javascript>
...
4. Дадим возможность посетителю выбирать скорость изменения прозрачности фотографии. Для этого поместим на страничку объект, который называется меню или раскрывающийся список:
c в файл dusja.htm внутрь контейнера <FIELDSET> добавь код:
<BR>
<SELECT onchange="set_speed(selectedIndex)">
<OPTION>медленнее</OPTION>
<OPTION selected>нормально</OPTION>
<OPTION>быстрее</OPTION>
</SELECT>
<SPAN id=speed> Скорость: 50</SPAN>
c в файл my_script.js добавь функцию:
var spd=20;
function set_speed(n)
{ switch (n)
{ case 0: spd=80; break;
case 1: spd=20; break;
case 2: spd=5; break;
};
speed.innerText="Скорость: "+(1000/spd);
}
c и измени функцию start_foto():
function start_foto()
{tmr=setInterval("foto_alpha()", spd);}
c проверь, как работает новый скрипт.
Тег <SELECT> помешает на страничку раскрывающийся список и заполняет его строками, заданными тегами <OPTION>. У тега <OPTION> есть единственный атрибут selected, присутствие которого говорит, что данная строка выбрана по умолчанию.
Для тега <SELECT> задана обработка события onchange (выбор строки в списке), которая записана в функции set_speed. Аргументом в эту функцию передаётся свойство списка selectedIndex (номер выбранной строки).
В функции set_speed используется оператор выбора switch:
switch (признак)
{ case значение1: команды1; break;
case значение2: команды2; break;
...
default: команды«иначе»; break;
}
этот оператор ищет среди значений то, которое совпадает со значением признака, и выполняет соответствующие команды. Если же значение не найдено, выполняются команды ветви default.
|
|
|
Кроме раскрывающегося списка мы поместили на страничку тег <SPAN> с именем speed. При выборе значения скорости мы изменяем свойство innerText (записанный внутри тега текст) этого тега. А значение этого свойства складывается из слова Скорость: и значения арифметического выражения 1000/spd. Попробуй объяснить, почему не стоит вывести туда просто spd?
5. Наш сайт построен так, что в верхнем фрейме всегда отображается один и тот же заголовок. Иногда это бывает удобно, но чаще стоит туда помещать заголовок страницы, отображаемой в основном фрейме. Но тогда появляется вопрос: а какой адрес записывать в тег <A> в файле navig.htm? Напрашивающийся ответ – поместить туда цепочку адресов в паре с именами целевых фреймов – оказывается неверным. Браузер «заметит» только первый адрес. Поэтому воспользуемся методом open (для простоты можем считать, что метод – это что-то вроде готовой функции):
c в файл my_script.js помещаем ещё одну функцию:
function load_frames(hr1,hr2)
{ open(hr1,"zag");
open(hr2,"glavnoe");
}
c в файле index.html даём имя zag верхнему фрейму:
<FRAME src=zagol.htm noresize name=zag >
c к файлу navig.htm подключаем файл со скриптами:
<HEAD>
<SCRIPT src="my_script.js"></SCRIPT>
</HEAD>
c и в нём же изменяем строки:
<P><A href=dusja.htm target=glavnoe>
<img src=images/dusja.gif class=panelka
onclick="load_frames('zagol-d.htm','dusja.htm')" ></A>
и им подобные;
c создаём файлы zagol-d.htm, zagol-p.htm и zagol-k.htm, которые отличаются от файла zagol.htm только лишь текстом заголовка. Поэтому открой файл zagol.htm, измени текст Я и мои друзья на Наша любимица Дуся и сохрани файл под именем zagol-d.htm…
c не забудь убрать ненужный теперь заголовок в файле dusja.htm;
c можно посмотреть результат и разобраться, что же мы наделали.
Метод open загружает указанный в первом аргументе файл в окно, указанное во втором аргументе.
Функция load_frames получает в качестве аргументов имена файлов и загружает первый файл во фрейм zag, а второй – в glavnoe.
В файле navig.htm мы совсем убираем тег <A>, заменяя его обработкой события onclick.
|
|
|
Таким образом можно «обмануть» браузер и сделать ссылку согласно своим вкусам и потребностям.
6. В связи с этим опять «хитрый» вопрос: что произойдёт, если событие onclick в файле navig.htm заменить на onmouseover?
7. Ну и под конец снабдим навигационный фрейм кнопками Назад и Вперёд. Почему мы это делаем сейчас? Да просто раньше обычными средствами HTML этого сделать было нельзя. Представь, что мы «прибыли» на Дусину страничку и жмём кнопку Назад. Какая ссылка должна прятаться в этой кнопке?..
c к файлу navig.htm подключаем стилевой файл и добавляем несколько строк:
<HTML>
<HEAD>
<SCRIPT src="my_script.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href=my_style.css>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
< BR ><img src=images/home.gif class=panelka
onclick="load_frames('zagol.htm','glav.htm')">
< BR ><img src=images/pogrom.gif class=panelka
onclick="load_frames('zagol-p.htm','pogrom.htm')">
< BR ><img src=images/dusja.gif class=panelka
onclick="load_frames('zagol-d.htm','dusja.htm')">
< BR ><img src=images/klava.gif class=panelka
onclick="load_frames('zagol-k.htm','klava.htm')">
<BR><SPAN onclick="history.back()"
class=panelka> Назад </SPAN>
<BR><SPAN onclick="history.forward()"
class=panelka>Вперёд</SPAN>
</BODY>
</HTML>
Здесь мы всего лишь используем методы back() и forward() объекта history, который хранит всю историю перемещений пользователя по страничкам. Обрати внимание, что мы не стали создавать функцию, вызывающую эти методы. Зачем? Ведь команда в этой функции будет всего одна. В общем-то, в кавычках после события можно записывать сколь угодно длинный код вместо того, чтобы помещать его в специальную функцию. Но в этом случае мы лишаемся возможности повторно, в другом месте, использовать этот же код. Да и исправлять что-либо в коде удобно в одном файле, а не выискивая его по всем файлам сайта.
c проверь работу кнопок Назад и Вперёд.
Если ты всё сделал правильно, то работать эти кнопки будут довольно странно – сначала вернётся содержимое главного фрейма, а уж потом, после повторного нажатия кнопки Назад, покажется заголовок. Но, если вдуматься, так и должно быть, ведь, например, кнопка Дуся загружает по очереди две странички. Чтобы исправить такое положение, можно дважды вызвать метод back() или forward().
c исправь обработчики событий:
<BR><SPAN onclick=" history.back();history.back() "
class=panelka> Назад </SPAN>
Теперь стоит отдохнуть, потому что далее следует третья «половина» одиннадцатого чертежа.
|
|
|
|
|
Дата добавления: 2014-11-16; Просмотров: 390; Нарушение авторских прав?; Мы поможем в написании вашей работы!