| Архив рассылки Web-программирование - это просто! | Не показываются картинки? |
Добрый день, уважаемые подписчики!
Тема сегодняшнего выпуска: "Java Script: разворачивающееся горизонтальное меню. Продолжение".
Как я и обещал, продолжим разбор примера меню, который мы начали изучать в прошлом выпуске. Вернемся к первому тэгу 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 то выключаем обработчик таймера (функция, которая должна вызваться спустя указанное время).
-
Если какое либо другое значение то производим пересчет координат, при чем учитываем тип и версию бразуреа.
Вы, наверно, догадались, что данный скрипт скачан из Интернета, и я на примере его построчного разбора пытаюсь объяснить вам, как можно понять приницип работы чужого кода.
Есть и другие приемы разбора программы, не такие скучные и гораздо более эффективные, чем рассматривать каждую строчку и пытаться понять, зачем и для чего она нужно. Но об этих приемах я расскажу в следующем выпуске.
С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.
Архив рассылки | RSS версия | Настройки | Отписаться: На сайте / По почте
Комментариев нет:
Отправить комментарий