Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Помогите разобраться со скриптом

Автор: PROme 13.3.2004, 19:09

Очень уж я слаб в ЖС
Надыбал такой скрипт:

Код

var agt=navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
            && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
            && (agt.indexOf('webtv')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly      = (is_nav && ((agt.indexOf(";nav") != -1) ||
                      (agt.indexOf("; nav") != -1)) );
var is_nav5 = (is_nav && (is_major == 5));
var is_nav5up = (is_nav && (is_major >= 5));

var is_ie   = (agt.indexOf("msie") != -1);
var is_ie3  = (is_ie && (is_major < 4));
var is_ie4  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) );
var is_ie4up  = (is_ie  && (is_major >= 4));
var is_ie5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5up  = (is_ie  && !is_ie3 && !is_ie4);
var is_aol   = (agt.indexOf("aol") != -1);
var is_aol3  = (is_aol && is_ie3);
var is_aol4  = (is_aol && is_ie4);
var is_opera = (agt.indexOf("opera") != -1);
var is_webtv = (agt.indexOf("webtv") != -1);
var is_js;
if (is_nav2 || is_ie3) is_js = 1.0
else if (is_nav3 || is_opera) is_js = 1.1
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3
else if (is_nav5) is_js = 1.4
else if (is_nav && (is_major > 5)) is_js = 1.4
else if (is_ie && (is_major > 5)) is_js = 1.3
else is_js = 0.0;
var is_win   = ( (agt.indexOf("win")!=-1) || (agt.indexOf("16bit")!=-1) );
var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95")!=-1));
var is_win16 = ((agt.indexOf("win16")!=-1) ||
           (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1) ||
           (agt.indexOf("windows 16-bit")!=-1) );

var is_win31 = ((agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||
                (agt.indexOf("windows 16-bit")!=-1));
var is_win98 = ((agt.indexOf("win98")!=-1) || (agt.indexOf("windows 98")!=-1));
var is_winnt = ((agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1));
var is_win32 = (is_win95 || is_winnt || is_win98 ||
                ((is_major >= 4) && (navigator.platform == "Win32")) ||
                (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1));

var is_os2   = ((agt.indexOf("os/2")!=-1) ||
                (navigator.appVersion.indexOf("OS/2")!=-1) ||
                (agt.indexOf("ibm-webexplorer")!=-1));

var is_mac    = (agt.indexOf("mac")!=-1);
var is_mac68k = (is_mac && ((agt.indexOf("68k")!=-1) || 
                           (agt.indexOf("68000")!=-1)));
var is_macppc = (is_mac && ((agt.indexOf("ppc")!=-1) ||
                            (agt.indexOf("powerpc")!=-1)));





ypSlideOutMenu.Registry = []
ypSlideOutMenu.aniLen = 2000
ypSlideOutMenu.hideDelay = 100
ypSlideOutMenu.minCPUResolution = 10

function ypSlideOutMenu(id, dir, left, top, width, height)
{
this.ie = document.all ? 1 : 0
this.ns4 = document.layers ? 1 : 0
this.dom = document.getElementById ? 1 : 0
if (this.ie || this.ns4 || this.dom)
{
this.id = id
this.dir = dir
this.orientation = dir == "left" || dir == "right" ? "h" : "v"
this.dirType = dir == "right" || dir == "down" ? "-" : "+"
this.dim = this.orientation == "h" ? width : height
this.hideTimer = false
this.aniTimer = false
this.open = false
this.over = false
this.startTime = 0
this.gRef = "ypSlideOutMenu_"+id
eval(this.gRef+"=this")
ypSlideOutMenu.Registry[id] = this
var d = document
d.write('<style type="text/css">')
d.write('#' + this.id + 'Container { visibility:hidden; ')
d.write('left:' + left + 'px; ')
d.write('top:' + top + 'px; ')
d.write('overflow:hidden; }')
d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ')
d.write('width:' + width + 'px; ')
d.write('height:' + height + 'px; ')
d.write('clip:rect(0 ' + width + ' ' + height + ' 0); ')
d.write('}')
d.write('</style>')
this.load()
}
}
ypSlideOutMenu.prototype.load = function()
{
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen 
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
this.endSlide()
}
}
ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container)
{
obj.over = true
for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer)
}
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}

var mY;
var mX;
if (is_nav)
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=MouseMove;
}

function MouseMove(e)
{
 mX= e.pageX;
 mY= e.pageY;
}
  
  
ypSlideOutMenu.hideMenu = function(id)
{
 var obj = ypSlideOutMenu.Registry[id]
 var m_o = id.substr(4,id.length- 4);
 if (obj.container)
{
 if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
 obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}



ypSlideOutMenu.hide = function(id)
{
 var obj = ypSlideOutMenu.Registry[id]
 obj.over = false
 if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
 obj.hideTimer = 0
 if (obj.open && !obj.aniTimer) obj.startSlide(false)
}

ypSlideOutMenu.prototype.startSlide = function(open)
{
 this[open ? "onactivate" : "ondeactivate"]()
 this.open = open
 if (open) this.setVisibility(true)
 this.startTime = (new Date()).getTime()
 this.aniTimer = window.setInterval(this.gRef + ".slide()", ypSlideOutMenu.minCPUResolution)
}


ypSlideOutMenu.prototype.slide = function()
{
var elapsed = (new Date()).getTime() - this.startTime
if (elapsed > ypSlideOutMenu.aniLen) this.endSlide()
else
{
var d = Math.round(Math.pow(ypSlideOutMenu.aniLen-elapsed, 2) * this.accelConst)
if (this.open && this.dirType == "-") d = -d
else if (this.open && this.dirType == "+") d = -d
else if (!this.open && this.dirType == "-") d = -this.dim + d
else d = this.dim + d
this.moveTo(d)
}
}
ypSlideOutMenu.prototype.endSlide = function()
{
this.aniTimer = window.clearTimeout(this.aniTimer)
this.moveTo(this.open ? this.outPos : this.homePos)
if (!this.open) this.setVisibility(false)
if ((this.open && !this.over) || (!this.open && this.over))
{
this.startSlide(this.over)
}
}
ypSlideOutMenu.prototype.setVisibility = function(bShow)
{
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
}
ypSlideOutMenu.prototype.moveTo = function(p)
{
this.style[this.orientation == "h" ? "left" : "top"] = this.ns4 ? p : p + "px"
}
ypSlideOutMenu.prototype.getPos = function(c)
{
return parseInt(this.style[c])
}
ypSlideOutMenu.prototype.onactivate = function() { }
ypSlideOutMenu.prototype.ondeactivate = function() { }

var mtop=25;
var mwidth = 150;

это в отдельном файле и работает так:

Код

onmouseover="ypSlideOutMenu.showMenu('menu1');"
onmouseout="ypSlideOutMenu.hideMenu('menu1');"

+ вот это:

Код


<script language=JavaScript type=text/javascript>
new ypSlideOutMenu("menu1", "down", 7, 104, 122, 45);
</SCRIPT>
...
<DIV id=menu1Container>
...
<DIV id=menu1Content style="BORDER-RIGHT: rgb(200,200,222) 4px solid; BORDER-TOP: rgb(200,200,222) 4px solid; BORDER-LEFT: rgb(200,200,222) 4px solid; BORDER-BOTTOM: rgb(200,200,222) 4px solid">

Кароче скрипт при наведении мыши на объект вываливает меню (onmouseover="ypSlideOutMenu.showMenu('menu1');"), при отведении =) - убирает (onmouseout="ypSlideOutMenu.hideMenu('menu1');") хотя я думаю и так све понятно...

При этом меню перед появлением невидно, также как и после свертывания.
Мне нужно чтобы еще до вываливания (наведения мыши на объект) была видна нижняя часть меню, при наведении - высовывать его целиком, а при отведении - в исходное состояние (видня нижняя часть - т.е. меню полностью не прячится).

Пожалуйста помогите!

Автор: Sardar 13.3.2004, 22:14

Оценки скрипту потом вынесем...

Строчкой:

Код

 this.dim = this.orientation == "h" ? width : height

задается на сколько будет спрятанно меню, в данном случае полностью.

Отними от всей это лабуды столько пикселей на сколько это дело будет торчать.
Можно задать это в конструкторе, но тогда вот эти строки не нужны:

Код

d.write('width:' + width + 'px; ')
d.write('height:' + height + 'px; ')

Что бы меню не исчезало, измени следующее:

Код

ypSlideOutMenu.prototype.setVisibility = function(bShow)
{/*
var s = this.ns4 ? this.container : this.container.style
s.visibility = bShow ? "visible" : "hidden"
*/
}

P.S. Первая туева хуча строк вообще не нужна, ты же не системную утилиту по определению платформы пользователя пишешь

Автор: PROme 14.3.2004, 00:39

Sardar ну спасибо тебе человечище!!!
Хотел че-нить с твоим рейтингом сделать, а там ашыбка

Ниче, я тебе это припомню

повышу рейтинг, так и знай! ;)

ЗЫ: а скрипт, ясен пень не я писал - нашел на диске - это было выпадающее меню... я его доделаю, почищу, а потом еще потревожу, мож че подскажешь, а то я могу и лишнего оставить...

Автор: Sardar 14.3.2004, 03:32

PROme Как скрпт будет готов, кинь мне на мыло. Будет время попробую оптимизировать.

Автор: PROme 14.3.2004, 10:38

Тут еще проблемка...

Код


onmouseover="ypSlideOutMenu.showMenu('menu1');"
onmouseout="ypSlideOutMenu.hideMenu('menu1');"

Юзается чтобы опустить/поднять меню...
Если я пишу что-то типа такого:

Код


<script language=JavaScript>
ypSlideOutMenu.showMenu('menu1');
</SCRIPT>

Ничего не происходит

К томуже уберал я эти события (при неведении/отведении мыши от текста, сохранил, обновил - а оно все равно так!)

Помогите пожалуйста!

Автор: Alx 14.3.2004, 10:56

это потому, что эта функция выполняется перед загрузкой всего документа, т.е. она выполняется, а ypSlideOutMenu ещё не существует! поэтому сделай так:

<body onload="ypSlideOutMenu.showMenu('menu1');">

или так:

<script>
function func()
{ypSlideOutMenu.showMenu('menu1');
}
</script>
<body onload="func();">

Автор: PROme 14.3.2004, 11:09

Все равно непахает

Я думаю тут дело и в самом модуле, например вот тут:

Код


ypSlideOutMenu.prototype.load = function()
{
var d = document
var lyrId1 = this.id + "Container"
var lyrId2 = this.id + "Content"
var obj1 = this.dom ? d.getElementById(lyrId1) : this.ie ? d.all[lyrId1] : d.layers[lyrId1]
if (obj1) var obj2 = this.ns4 ? obj1.layers[lyrId2] : this.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
var temp
if (!obj1 || !obj2) window.setTimeout(this.gRef + ".load()", 100)
else {
this.container = obj1
this.menu = obj2
this.style = this.ns4 ? this.menu : this.menu.style
this.homePos = eval("0" + this.dirType + this.dim)
this.outPos = 0
this.accelConst = (this.outPos - this.homePos) / ypSlideOutMenu.aniLen / ypSlideOutMenu.aniLen 
if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")
this.endSlide()
}
}

вот этот кусок:

Код


if (this.ns4) this.menu.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')")
this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')")

Хотяможет я и неправ... но там что-то с мышей

Очень тебя прошу, если можешь помоги, а то я этого невыдержу

Автор: PROme 14.3.2004, 11:28

Да, забыл уточнить - меню двигается при наведении на него мышей, а как по-другому не пытаюсь сдвинуть его с места - ни в какую.

Еще немного уточню задачу - может можно как-то легче сделать итак, что надо: загружается страница, меню полу спрятано, потом стартует один ЖС скрипт и сразу выежает меню и пока он работает меню никуда не дергается. Вкрипт отработал - меню заежает в исходную позицию.

Автор: PROme 14.3.2004, 12:18

Начал искать в Сети и нашел одну маленькую статью с таким же кодом, по-моему именно то что мне надо:

Код


DHTML. Свертывание и развертывание слоя.

Рассмотрим более сложную операцию - свертывание и развертывание слоя. Будем выполнять ее по горизонтали. По вертикали эта операция выполняется аналогично. Для ее выполнения нам нужно знать ширину слоя. Если мы хотим свернуть слой, никаких предварительных действий предпринимать не надо, но если мы хотим его развернуть, то нужно установить область обреза с левым и правым краями, равными половине ширины слоя. Это можно установить при определении слоя, или в начале программы JavaScript. При этом надо не забыть предварительно спрятать слой для устранения мелькания.

Создадим функцию свертки/развертки:


function curtainWidth(layerName,xinc,inctime,stopwidth)

второй параметр определяет величину прироста/уменьшения ширины, третий - задержку, а четвертый - конечную ширину. Если мы развертываем слой, то конечная ширина должна быть равна ширине слоя, если свертываем, то нулю.

Первым делом изменим левый и правый край области обреза:


eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.left += -(xinc/2)');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.right += (xinc/2)');

Если мы перестарались, то подправим ширину обреза:


if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width < 0')){lyr.clip.width = 0}

Теперь проверим, не достигли ли мы конечного условия:


if (((xinc < 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width 
                                                                     > stopwidth'))) || 
((xinc > 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width < 
                                                                    stopwidth'))))

Если нет, то рекурсивно вызовем функцию:


setTimeout('curtainWidth("'+layerName+'",'+xinc+','+inctime+','+stopwidth+')',inctime);

Вот, что у нас получилось:


function curtainWidth(layerName,xinc,inctime,stopwidth) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.left += -(xinc/2)');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.right += (xinc/2)');
if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width < 0')){lyr.clip.width = 0}
if (((xinc < 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width > 
                                                            stopwidth'))) || 
    ((xinc > 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width < 
                                                             stopwidth')))) {
  setTimeout('curtainWidth("'+layerName+'",'+xinc+','+inctime+','+stopwidth+')',inctime);
 }
}

Но вот, как я не пытался применить этот код, ничего невыходит

Может подскажете ламерюке?

Автор: Sardar 14.3.2004, 18:04

Ну вы блин даете...

Ладно разберемся с кодом. Все вопрсы по синтактису(во а я не знал что так можно!!!) напрявлять в PM и конечно RTFM.

Первый кусок понятно что делает, узнает "всю правду" о клиентском ПО.

Далее определяется проторип/функция: ypSlideOutMenu
Её задача найти и подготовить менюшку по заданному ID. Также задаются обязательные стили для менюшки.
Еще создается переменная ypSlideOutMenu_id содержащая обьект представляющий менюшку. Он также находится в ypSlideOutMenu.Registry - массив всех созданных меню/обьектов.
Функция ypSlideOutMenu{object}.load() устанавливает меню в исходное положение. Заодно выставляет обработчики событий onmouseover и onmouseout, т.е. задавать их в тегах не нужно.
Убрать реакцию на мышь можно закомментировав:

Код

//this.menu.onmouseover = new Function("ypSlideOutMenu.showMenu('" + this.id + "')");
//this.menu.onmouseout = new Function("ypSlideOutMenu.hideMenu('" + this.id + "')");

Создается/регистрируется менюшка через: [ypSlideOutMenu_(id)=] new ypSlideOutMenu(id,направление,поз_х, поз_y, ширина, высота)

Всем обьектам/менюшкам заданны функции в прототипе:
1) startSlide - запуск движения, устанавливает временной интервал, вызываетс showMenu
2) slide - расчет новой позиции, вызывается в интервале, через каждые minCPUResolution милисекунд
3) endSlide - сброс анимации, скрытие/открытие меню, вызов возврата
4) setVisibility - думаю понятно
5) moveTo - устанавливает менюшку в заданное положение
Это все тобой не используется.

Тебе доступны функции управления, собранные в функции/прототипе ypSlideOutMenu(ну где ты еще такое увидишь

):
1) showMenu(ИД_нужной_менюшки) - показать меню, естественно оно должно быть закруженно и зарегистрированно(if(typeof(ypSlideOutMenu_(id))!='undefined')...).
2) hideMenu(ИД)нужной_менюшки) - скрыть меню

Когда меню открывается или наоборот закрывается, то вызывается onactivate или ondeactivate события менюшки.

Открыть менюшку можно через ypSlideOutMenu.showMenu('menu_ID'):

Код

<a href="javascript: ypSlideOutMenu.showMenu('menu_ID')">Test</a>

Закрыть можно через hideMenu. Это рабтает, я проверил.

Вроде все.

Второй скрипт работает с вырезкой(clip), первый с хорошим свойством CSS overflow:hidden. Каждый вибирает по вкусу.

Автор: PROme 14.3.2004, 20:38

Сделал, жалуется на строку (последнюю):

Цитата

ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
var m_o = id.substr(4,id.length- 4);
if (obj.container)

Незнаю даже... и к стати, не стоит рассписывать что там зачем, я изучил уже много языков, синтаксис у ЖС очень простой так что видя некоторые вещи в первый раз могу с увереностью сказать зачем они и что делают.

А вот если на ЖС (или другом незнакомом) нужно что-то изменить тут уже проблемки, темболее если учесть жесткий синтаксис ЖС и фактически отсутствие каких-либо средств отладки.

Спасибо огромное за помощь, мне был бы интересен тот скрипт что у тебя работал, а не описание. Если можешь, плиз прикрепи архив.

Такие же проблемы и со вторым...

Еще раз огромное спасибо за то что взялся мне помочь

Автор: PROme 15.3.2004, 22:31

Цитата

А окуда вызывать ypSlideOutMenu.hideMenu('menu1');

Мне надо чтоб страница загружалась - вылазит меню, ЖС скрипт на нем кое-че меняет, а после оно обратно залазит.

Автор: Sardar 17.3.2004, 04:21

PROme из-за тебя не выспался

Переписал скрипт с "нуля", чуть изменив и уличшив алгоритм.
Где не понятно вставлял коментарии, вопросы пости сюда.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>SlipMenu v1.0</title>
<script language="Javascript" type="text/javascript">
<!--
var SlipMenu={ //Вся инфа будет хранится здесь
 references:new Object(),
 create:SlipMenuCreate, //Менюшное API
 show:SlipMenuShow,
 hidde:SlipMenuHidde,
 exists:SlipMenuExists
}
SlipMenu.minCPUResolution=20; //ms задержка между кадрами
SlipMenu.hiddeDelay=500; //ms задержка перед закрытием
SlipMenu.animLength=2000; //ms длительность анимации
SlipMenu.maxOpenDelay=1500; //ms максимальное время для открытой меню, 0-не используется
//Создать/Зарегистрировать меню
function SlipMenuCreate(id,dir,otstup,onact,ondeact,onoutdone,onindone) {
 var obj;  if((obj=findObj(id))==null) return false;
 cont=new SlipMenuRepresentation(id,obj,dir,otstup);
 //установим наши события
 cont.onactive=typeof(onact)=='string'? new Function(onact): onact;
 cont.ondeactive=typeof(ondeact)=='string'? new Function(ondeact): ondeact;
 cont.onoutdone=typeof(onoutdone)=='string'? new Function(onoutdone): onoutdone;
 cont.onindone=typeof(onindone)=='string'? new Function(onindone): onindone; 
 SlipMenu.references[id]=cont;
 return cont;
}
//конструктор обьекта/представления меню(верхнего слоя)
function SlipMenuRepresentation(id,obj,dir,otstup) {
 this.id=id;
 this.target=obj;
 if(document.layers) {
// я не уверен на счет clientWidth под глюкавой Netscape4
  this.movLength=parseInt(this.target[("upperdown".indexOf(dir)>=0)?"clientHeight":"clientWidth"])-otstup;
  this.style=this.target;
  this.dirType=("upperdown".indexOf(dir)>=0)? 'top': 'left';
  this.target.captureEvents(Event.MOUSEMOVE | Event.MOUSEOUT);
  this.XBOCT="px"; //эх NS4, хотя кто сейчас под ним сидит...
 } else {
  this.movLength=parseInt(this.target.style[("upperdown".indexOf(dir)>=0)? "height": "width"])-otstup;
  this.style=this.target.style;
  this.dirType=("upperdown".indexOf(dir)>=0)? 'top': 'left';
  this.XBOCT=0;
 }
 this.homePos=("downright".indexOf(dir)>=0)? -this.movLength: this.movLength;
 this.style[this.dirType]=this.homePos+this.XBOCT; //установим в исходное положение
 this.opening=false;
 this.animTimer=this.hiddeTimer=this.stopTimer=null;
 this.startTime=0;
 this.preCalc=Math.pow(SlipMenu.animLength,2);
 //зарегистрируем реакцию на мышь
 this.target.onmousemove=new Function("SlipMenu.show('"+this.id+"');");
 this.target.onmouseout=new Function("SlipMenu.hidde('"+this.id+"');");
 //methods, лучше их не трогать, а юзать API
 this.startSlide=SlipMenuStartSlide;
 this.slide=SlipMenuSlide;
 if("downright".indexOf(dir)>=0) {
  this.calculate=function(newpos) {if(this.opening) return -newpos; else return newpos-this.movLength;}
  this.getCurPos=function(newpos) {if(this.opening) return -newpos; else return this.movLength+newpos;}
 } else this.calculate=this.getCurPos=function(newpos) {if(this.opening) return newpos; else return this.movLength-newpos;}
 malert("Object created: "+this.id);
}
//Начать движение
function SlipMenuStartSlide(opening) {
 malert("Start sliding: "+opening);
//сбросим таймер намаксимальное открытие
 if(this.stopTimer!=null) {window.clearTimeout(this.stopTimer); this.stopTimer=null;}
 if(this.opening==opening) return;
 this.opening=opening;
//выстрелим наши события
 if(this.opening&&typeof(this.onactive)=='function') this.onactive.apply(this.target);
 else if(!this.opening&&typeof(this.ondeactive)=='function') this.ondeactive.apply(this.target);
 if(this.animTimer!=null) window.clearInterval(this.animTimer);
 if(this.hiddeTimer!=null) {window.clearTimeout(this.hiddeTimer); this.hiddeTimer=null;}
// Подсчитаем новый интервал, учитывая прошлое положение меню
 this.startTime=(new Date()).getTime()+Math.round(Math.sqrt(this.getCurPos(parseInt(this.style[this.dirType]))*this.preCalc/this.movLength)-SlipMenu.animLength);
//установим таймер/аниматор
 this.animTimer=window.setInterval("SlipMenu.references['"+this.id+"'].slide()",SlipMenu.minCPUResolution);
}
//расчитать и сдвинуть меню
function SlipMenuSlide() {
 var elapsed=(new Date()).getTime()-this.startTime;
 if(elapsed>=SlipMenu.animLength) { //stop animation
  malert("Stop sliding: "+this.opening);
  window.clearInterval(this.animTimer);
  this.animTimer=null;
  this.style[this.dirType]=(this.opening? 0: this.homePos);
  if(this.opening&&typeof(this.onoutdone)=='function') this.onoutdone.apply(this.target);
  else if(!this.opening&&typeof(this.onindone)=='function') this.onindone.apply(this.target);
//установим лимит на максимальное время в открытом положении
  if(this.opening&&typeof(SlipMenu.maxOpenDelay)=='number'&&SlipMenu.maxOpenDelay>0)
   this.stopTimer=window.setTimeout("SlipMenu.references['"+this.id+"'].startSlide(false)",SlipMenu.maxOpenDelay);
 } else{
  this.style[this.dirType]=this.calculate(Math.round((Math.pow(SlipMenu.animLength-elapsed,2)*this.movLength)/this.preCalc))+this.XBOCT;
 }
}
//======== API ============
//Функции могут быть вызванны как SlipMenu.name(), так и SlipMenuName()
//открыть меню
function SlipMenuShow(id) {
 malert("Show menu: "+id);
 if(typeof(SlipMenu.references[id])!='undefined') SlipMenu.references[id].startSlide(true);
}
//закрыть меню
function SlipMenuHidde(id) {
 malert("Hidde menu: "+id);
 if(typeof(SlipMenu.references[id])!='undefined') {
//закрытие с задержкой
   if(typeof(SlipMenu.hiddeDelay)!='number'||SlipMenu.hiddeDelay<1) SlipMenu.hiddeDelay=1;
   SlipMenu.references[id].hiddeTimer=window.setTimeout("SlipMenu.references['"+id+"'].startSlide(false)",SlipMenu.hiddeDelay);
  }
}
//проверка на существование/регистрацию меню
function SlipMenuExists(id) {
 return (typeof(SlipMenu.references[id])=='object');
}
//общая функция - найти обьект по ID
function findObj(id) {
 if(document.getElementById) return document.getElementById(id);
 else if(document.all&&document.all[id]) return document.all[id];
 else if(document.layers&&document.layers[id]) return document.layers[id];
 else return null;
}

//END OF Script
function malert(txt) { //для отладки
// document.body.insertAdjacentHTML("beforeend","<br>"+txt+"\n"); //в ИЕ
// alert(txt); //хмм, в Мозилла :))
}
//Собрать менюшки
function registerMenus() {
//с событиями
SlipMenu.create('menu1','down',20,\
"this.style.backgroundColor='#d8fadf'",\
"this.style.backgroundColor='#c5edd6'",\
"this.style.backgroundColor='#a2c4ab'",\
"this.style.backgroundColor='#d2f4db'");
//без событий, в других направлениях
SlipMenu.create('menu2', 'up',20);
SlipMenu.create('menu3','left',25);
SlipMenu.create('menu4','right',20);
}
//-->
</script>
</head>
<a href="javascript:SlipMenu.show('menu1');">Show Menu1</a>&nbsp;<a href="javascript:SlipMenu.hidde('menu1')">Hidde Menu1</a>
<body onLoad="registerMenus();">
<div style="position:absolute; overflow:hidden; background-color:#c3b1f3; width:200; height:100; left:50; top:50">
<div id="menu1" style="position:absolute; width:200; height:100; background-color: #d2f4db;">
Menu Item
</div>
</div>
<body onLoad="registerMenus();">
<div style="position:absolute; overflow:hidden; background-color:#c3b1f3; width:200; height:100; left:50; top:170">
<div id="menu2" style="position:absolute; width:200; height:100; background-color: #d2f4db;">
Menu Item
</div>
</div>
<body onLoad="registerMenus();">
<div style="position:absolute; overflow:hidden; background-color:#c3b1f3; width:200; height:100; left:50; top:290">
<div id="menu3" style="position:absolute; width:200; height:100; background-color: #d2f4db;">
Menu Item
</div>
</div>
<body onLoad="registerMenus();">
<div style="position:absolute; overflow:hidden; background-color:#c3b1f3; width:200; height:100; left:50; top:410">
<div id="menu4" style="position:absolute; width:200; height:100; background-color: #d2f4db;">
Menu Item
</div>
</div>

</body>
</html>

Ограничения:
1) все стили должны уже быть заданными, не хотел что бы скрипт изменял что либо.
2) обязательные параметры стиля: width(для горизон.),height(для верт.),position:absolute у обоих, overflow:hidden у контейнера.

Проверенно в IE, Мозилла 1.6, Опера 7.2. Вроде должно(по спецификациям) работать и под NS4, но если будут проблемы(баги с setTimeout и т.д.), то звыняйте 21 век уже.

Автор: PROme 17.3.2004, 14:24

Sardar, не будешь бить меня?
Неработает

Автор: SVK 17.3.2004, 17:30

убери "\ " в конце строк:

SlipMenu.create('menu1','down',20,\
"this.style.backgroundColor='#d8fadf'",\
"this.style.backgroundColor='#c5edd6'",\
"this.style.backgroundColor='#a2c4ab'",\

- заработает
Красивая менюшка получается! Клево так выезжает.

Автор: PROme 17.3.2004, 20:42

Спасибо всем огромное!

Автор: Sardar 17.3.2004, 21:26

Лишь бы у тебя все работало

PROme ты уже второй раз подкидываешь интересную идею, первый раз была быстрая работа с файлом очень большого размера. Если так пойдет и дальше, то потихоньку наполним базу исходников на JavaScript и PHP.