Урок 13. Управление шрифтами в CSS
New Page 1
Web-программирование: «Java
Script(JS): разворачивающееся горизонтальное меню. Продолжение».
Как я и
обещал, продолжим разбор примера меню, который мы начали изучать в
на
прошлом уроке Вернемся к
первому тэгу div:
<DIV id=menu style="Z-INDEX: 10; LEFT:
0px; WIDTH: 88px; POSITION: absolute; TOP: 78px">
<A onfocus=takeFocusBack() href="javascript:;">
<IMG onmouseover="P7AniMagic('main',47,78,50,30,0,0);P7AniMagic('work',168,78,50,30,0,0);
P7AniMagic('price',294,78,50,30,0,0);P7AniMagic('koordinaty',414,78,50,30,0,0);
P7AniMagic('guestbook',534,78,50,30,0,0);MM_showHideLayers('sbros','','show')"
height=15 src="img/menu.gif" width=88 border=0>
</A>
</DIV> |
Как видим,
внутри ссылки имеется тэг img, связанный с картинкой,
на которой изображена надпись "меню". У этого тэга есть свойство onmouseover,
которое обозначает событие подвода курсора мыши к объекту. В данном случае на
это событие навешано несколько обработчиков, перечисленных через точку с
запятой. Самый первый из них P7AniMagic, во с него то и начнем.
function P7AniMagic(el, x, y, a, b, c, s)
{ //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";}
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}else {g.moved=false;}
}
|
В
первой и второй строках у нас происходит инициализация переменных:
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\','; |
Функция
parseInt переводит значение в числовой тип (если оно у нас задано, например, в
виде строки символов). В переменной t у нас только
начинается формирование строки, ниже оно должно будет продолжиться.
Если мы нашли
объект, имя которого задано в первом аргументе (например
'main'), то, в зависимости от того, поддерживает ли браузер слои,
по разному обращаемся к стилям этого объекта:
| if ((g=MM_findObj(el))!=null)
{
d=(document.layers)?g:g.style;
}
else{return;} |
Для чего
сделано именно так? Дело в том, что в разных браузерах по разному осуществляется
доступ к CCS Свойствам слоя. В
MSIE 4 и
DOM1-браузерах доступ к свойству
осуществляется через объект style.
Если же мы не
находим заданный объект то просто тупо выходим из функции.
Рассмотрим
следующую строку:
| if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;} |
Если у нас
аргумент s (тот который последний) больше нуля, то к
переменной t добавляем еще перечисленные через запятую
аргументы функции. То есть, tу нас примет значение что
то типа этого:
| g.p7Magic = setTimeout("P7AniMagic('main',100,100,2,2,0,1)") |
Затем мы
выходим из функции. Если же s у нас равно нулю, то мы
просто идем дальше:
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0; |
Здесь в
переменные xx и yy при
записываем значение полей left и
top, если браузер поддерживает эти поля для объекта в переменной
d. Напомню, что в d у
нас ссылка на найденный объект или на его стиль (в зависимости от браузера).
Если таких свойств нет ( left и
top), то считаем, то они равны нулю.
Идем дальше:
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";}
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');
}else {g.moved=false;}
} |
В этом
операторе ветвления мы делаем разные действия в зависимости от значения
аргумента c:
-
Если
1 то смещаемся на значение свойств
left и top.
-
Если 2 то
выключаем обработчик таймера (функция, которая должна вызваться спустя указанное
время).
-
Если какое
либо другое значение то производим пересчет координат, при чем учитываем тип и
версию бразуреа.
Есть и другие
приемы разбора программы, не такие скучные и гораздо более эффективные, чем
рассматривать каждую строчку и пытаться понять, зачем и для чего она нужно. Но
об этих приемах я расскажу в следующем выпуске.
|