Web-программирование: «Java Script(JS): разворачивающееся горизонтальное меню. Продолжение».

Автор megabax

28.10.2010 г.

Урок 13. Управление шрифтами в CSS New Page 1

Web-программирование: «Java Script(JS): разворачивающееся горизонтальное меню. Продолжение».

Как я и обещал, продолжим разбор примера меню, который мы начали изучать в на прошлом уроке Вернемся к первому тэгу div:

Как видим, внутри ссылки имеется тэг img, связанный с картинкой, на которой изображена надпись "меню". У этого тэга есть свойство onmouseover, которое обозначает событие подвода курсора мыши к объекту. В данном случае на это событие навешано несколько обработчиков, перечисленных через точку с запятой. Самый первый из них P7AniMagic, во с него то и начнем.

В первой и второй строках у нас происходит инициализация переменных:

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 то выключаем обработчик таймера (функция, которая должна вызваться спустя указанное время).
Если какое либо другое значение то производим пересчет координат, при чем учитываем тип и версию бразуреа.

Есть и другие приемы разбора программы, не такие скучные и гораздо более эффективные, чем рассматривать каждую строчку и пытаться понять, зачем и для чего она нужно. Но об этих приемах я расскажу в следующем выпуске.

Последнее обновление ( 28.10.2010 г. )

« След.		Пред. »

Вернуться