Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Эффект плавного затемнения и обратный ему.


Автор: EugenyPavlenko 19.8.2007, 18:24
Добрый день,

Нужно добиться эффекта как тут:
http://www.ag.ru/

Когда нажимаешь "Регистрация" (синяя кнопка)
(появлеятся регистрация (див), остальное плавно затемняется, если закрывать регу на крестик - то все становится "на круги своя")

Как показать/скрыть ДИВ я знаю, проблема с эффектом.

Нужно, чтобы работало под ИЕ + Опера + ФФ + Сафари.

В текущем коде, как на этой сайте - работает под этими всеми бровзерами, как ни странно!



Я пробовал разбирать исходники страницы, но их там очень много и я запутался...
И не хочется подключать какие-то громадные библиотеки, ради этого эффекта...

Буду очень благодарен, если кто-то из знающих вытащит оттуда нужный кусок кода...

Заранее спасибо!

Автор: dXdYdZ 20.8.2007, 11:57
Для данного эффекта надо:
1) Поместить в слое под окном, но над document.body чёрный div высотой и шириной, равной высоте и ширине document.body.
2) Установить прозрачность div-y равной 0.0.
3) При показе окна плавно менять прозрачность до значения, меньшего 1 (например до 0.5)
4) При скрытии окна плавно возвращать прозрачность в 0.

Пример эффектов можете посмотреть http://www.dojo.com.ua/JSL.

Добавлено через 59 секунд
Можно также использовать, например, moo.fx - она не очень большая.

Автор: EugenyPavlenko 26.8.2007, 15:14
dXdYdZ, 

Спасибо, сделал, только проблема с определением Ширины и Высоты С УЧЕТОМ скрола
Пробовал по всякому, но не всегда получал то что надо, остановился на:
Код

var dw = document.body.clientWidth;
var dw2 = document.body.scrollHeight;


Работает как надо (размер черного дива = размеру видимой области + области под скролом) только под ИЕ!
Как сделать правильно, чтобы везде работало?

Автор: Ghirik 26.8.2007, 20:38
Немного не то, но возможно поможет.
Я использую кнопку бегающюю по вертикали за мышкой. Позиционирую кнопку всего одной строчкой:

Код

b.style.top=d.body.scrollTop+e.clientY-12


b-кнопка, e- event (событие MouseMove), 12 поправка - половина высоты кнопки.

Работает во всех браузерах.

Т.е., в Вашем случае, наверное можно использовать clientX вместо clientWidth и scrollTop вместо scrollHeight. Разумеется, они возвращают разные значения, но от этого уже можно плясать. Хотя, наверное, scrollHeight менять не потребуется.


Автор: EugenyPavlenko 26.8.2007, 21:12
Ghirik, 

Получилось сделать с scrollHeight...
Вся загвоздка, как я и подозревал, была в том, что, даже, не смотря на то, что JS-код стоял в конце, он выполнялся не самым последним... т.е он выполнялся ДО окончания загрузки страницы - по-этому определял неплавильно...

Исправил таким образом:
Код

<body onload="jjj();">


Где jjj - понятно какая ф-ция.

Спасибо за помощь.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)