Здравствуйте.
Нужно было реализовать такую задачу.
Есть три ссылки, по клику на которые появляется картинка соответствующая этой ссылке (появляются с анимацией, простая смена opacity), картинки находятся друг под другом с разными z-index и смена картинки происходит с плавным перетеканием с одной в другую. Я это реализовал, на кроссбраузерность еще не проверял, но мое решение явно корявое, хочу попросить вас помощи оптимизировать его.
Вот код, я попытался его обильно продокументировать, чтобы было проще разобраться в моей писанине:
function next() {
// глобальная переменная которая хранит значение прозрачности
var opacity = 0;
// глобальная ссылка на таймер
var timer;
// Функция, которая рекурсивно вызывается для смены значение прозрачнности нужного div,
// функции передается ссылка на объект на котором сработал onclick
function changeOpacity(handler) {
// делаем анимацию с шагом 2
opacity += 2;
// блок который должен появится имеет id такой же, как и ссылка на которой сработал
// onclick + "-inf". получаю этот блок
block = document.getElementById(handler.id+"-inf").style;
// устанавливаем свойство прозрачности для ie и всех остальных
block.opacity = opacity/100;
block.filter="alpha(opacity="+opacity+")";
// создаю глобальную переменную, в которой хранится ссылка на объект на
// котором сработал onclick, чтобы я смог ей воспользоваться внутри
// анонимной функции
// !!! очень не нравится это решение
var _handler = handler;
// собственно рекурсивно через таймер выполняю ету функцию, уменьшая прозрачность
timer = setTimeout(
function(){
changeOpacity(_handler);
}, 0);
// если прозрачностьдошла до предела, очищаю таймер
if (opacity>100) {
clearTimeout(timer);
};
}
// new-vd - div элемент-контейнерв котором расположен весь этот блок с
// картинками и сслками-переключателями. Получаю его
parrentBlock = document.getElementById("new-vd");
// Проверяю отображается на верху сейчас тот объект по которому клацнули
// (чтобы не делать анимацию того объекта который сейчас виден и так),
// если нет, выполняю анимацию
// не нравится, что приходится хранить идентификатор в виде атрибута
if (parrentBlock.getAttribute("vdCur") !== this.id) {
// z-index самого верхнего элемента также хранится в атрибуте
// тоже кажется коряво, незнаю как исправить
zIndex = parseInt(parrentBlock.getAttribute("zidx")) + 1;
// увеличиваю значение атрибута zIdx на 1
parrentBlock.setAttribute("zidx", zIndex);
// устанавливаю текущим элементов, тот элемент по которому клацнули
parrentBlock.setAttribute("vdCur", this.id);
// получаю блок который буду анимировать
block = document.getElementById(this.id+"-inf").style;
// выставляю его прозрачность в 0
block.opasity = 0;
block.filter="alpha(opacity=0)";
// и помещаю его на самый верх
block.zIndex = zIndex;
// ну и анимирую, описанной выше функцией
changeOpacity(this);
}
}
Решение явно не ахти, я плохо знаком с javascript, поэтому вышло вот так. Что мне не нравится:
1. То что приходится хранить id текущего блока который наверху и его z-index в виде атрибутов
2. То что приходится передавать handler через глобальную переменную в каждой итерации рекурсивной функции (явно плохо)
Помогите мне исправить эти проблемы, и плюс если подскажите еще улучшения, буду признателен.
PS. Советовать использовать готовую библиотеку, вроде jQuery и т.п. не нужно, скрипт не большой, ради него использовать большой фреймворк нет желания (боремся за каждый килобайт так сказать
![](images/smilies/smile.gif)
)