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

Web-программирование - это просто!


 

Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Java Script: разворачивающееся горизонтальное меню. Продолжение».

 

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

 

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

  • Если какое либо другое значение то производим пересчет координат, при чем учитываем тип и версию бразуреа.

Вы, наверно, догадались, что данный скрипт скачан из Интернета, и я на примере его построчного разбора пытаюсь объяснить вам, как можно понять приницип работы чужого кода.

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

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 


В избранное