Здравствуйте, решил сделать фотогаллерею, почти сделал ... но до конца нет , из головы больше выжать не могу, хочу спросить у Вас совета ГДЕ ОШИБКИ И ЧТО НЕ ТАК ? работает на 95 % , но малёк глючит . Пример тут http://sowie.de/volodya/Тестировал только на IE В коментариях посторался пояснить доступно. | Код |
<script language="javascript">
//необходимые переменные константы
var w = 0;
var alpha_3 = 100;
var j=0;
var ww=5;
var jj=1;
// функция которая работает на он клик на картинке
function zamena(x){
//alert("divId = " + x.parentNode.id + "; imgId = " + x.id + "; z-index (div) = " + x.parentNode.style.zIndex); // алерт для проверки айди, зет индекста и айди картинки
function work(){
key_2 = false;
if(jj > 10){
// последний этап : выключием анимацию , ставим всё в исходное положение.
clearInterval(setj);
key_2 = true;
jj=1;
// передвигаем на нужные места
for(i=4, w=0; i>=0 ; i--, w += 50){
document.getElementById('divId_' + i).style.opacity = 1 - (w * 0.004);
document.getElementById('divId_' + i).style.filter = 'progid:DXImageTransform.Microsoft.Alpha( opacity = ' + (100 - (w * 0.4)) + ')';
document.getElementById('img_' + i).style.width = 550 - w;
document.getElementById('img_' + i).style.height = Math.round(412 - (w*0.75));
document.getElementById('divId_' + i).style.left = Math.round(175 + (w/2));
document.getElementById('divId_' + i).style.top = Math.round(100 - (w/5));
}
// первую картинку от нашей стороны подгоняем под последнию (с нашей стороны), придаём стиля и делаем её видимой, на которую кликнули она стала последней
x.parentNode.style.opacity = 0.1;
x.parentNode.style.filter = 'progid:DXImageTransform.Microsoft.Alpha( opacity = 10)';
x.style.width = 300;
x.style.height = 225;
x.parentNode.style.left = 300;
x.parentNode.style.top = 50;
x.parentNode.style.display = 'block';
x.style.display = 'block';
// вот тут вот и застрял ... даже не знаю что уже сделать тут ... много что пробывал, оставил так.
// тут происходит замена айди и зет индекса со сдвигом на 1, для того чтоб вернуться в исходное положение 5-ая стала 0-ой, 4-ая стала 5-ой и т.д.
document.getElementsByTagName('body')[0].getElementsByTagName('div')[0].id = 'divId_1';
document.getElementsByTagName('body')[0].getElementsByTagName('img')[0].id = 'img_1';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[0].style.zIndex='1';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[1].id = 'divId_2';
document.getElementsByTagName('body')[0].getElementsByTagName('img')[1].id = 'img_2';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[1].style.zIndex='2';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[2].id = 'divId_3';
document.getElementsByTagName('body')[0].getElementsByTagName('img')[2].id = 'img_3';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[2].style.zIndex='3';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[3].id = 'divId_4';
document.getElementsByTagName('body')[0].getElementsByTagName('img')[3].id = 'img_4';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[3].style.zIndex='4';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[4].id = 'divId_5';
document.getElementsByTagName('body')[0].getElementsByTagName('img')[4].id = 'img_5';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[4].style.zIndex='5';
//if(document.getElementsByTagName('body')[0].getElementsByTagName('div')[4].id == "divId_5") alert("ok");
//else alert("no");
document.getElementById('divId_5').id = 'divId_0';
document.getElementById('img_5').id = 'img_0';
document.getElementsByTagName('body')[0].getElementsByTagName('div')[5].style.zIndex='0';
// конец
}
if(!key_2){
// цикл для смещения всех картинок вниз (позиционирование)
for(i=0, m=5; i <= 5; i++, m--){
var obj = document.getElementById('divId_' + m);
a = (Number(obj.style.opacity) + 0.02).toFixed(2);
obj.style.opacity = a;
obj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha( opacity = ' + (a * 100) + ')';
document.getElementById('img_' + m).style.width = obj.getElementsByTagName('img')[0].width + ww;
document.getElementById('img_' + m).style.height = Math.round(obj.getElementsByTagName('img')[0].height + (ww*0.75));
obj.style.left = Math.round(Number(obj.style.left.replace("px", "")) - (ww/2).toFixed(1) - 0.05);
obj.style.top = Math.round(Number(obj.style.top.replace("px", "")) + (ww/5));
}
jj++;
}
}
// функция для плавного исчезновения выбранной картинки
function fadeOut(){
key = false;
if(alpha_3 < 20){
clearInterval(seti);
x.style.display = 'none';
x.parentNode.style.display = 'none';
alpha_3 = 100;
key = true;
// тут запускается смещение всех картинок в необходимую позицию , т.е. 4 стала 5, 3 стала 4 и т.д.
setj = setInterval(work, 10);
}
if(!key){
var antiAlpha_3 = 100 - alpha_3;
x.parentNode.style.filter = 'progid:DXImageTransform.Microsoft.Alpha( opacity = ' + alpha_3 + ')';
x.parentNode.style.opacity = (alpha_3/100);
x.style.width = 550 + antiAlpha_3;
x.style.height = (550 + antiAlpha_3)*0.75 ;
x.parentNode.style.top = 100 + antiAlpha_3;
x.parentNode.style.left = 175 - antiAlpha_3/2;
alpha_3 -= 20;
}
}
seti = setInterval(fadeOut, 50);
}
// фукция нужна для создания необходимых компонентов , т.е. дива и внутри изображения
function createElem(t){
var w = t * 50;
(t==0) ? alpha = (t*10)+10 : alpha = t*2*10;
var alpha_2 = alpha/100;
var parent = document.getElementsByTagName('BODY')[0];
var newP = document.createElement('div');
//if(t == 0) new_id = 0; else new_id = (t/10);
newP.id = 'divId_' + t;
newP.style.border = '1px solid black';
/*newP.style.width = (400+w) + 'px';
newP.style.height = (300+t) + 'px';*/
newP.style.padding = '3px';
newP.style.background = '#c5c5c5';
newP.style.position = 'absolute';
newP.style.top = (50+(t*10)) + 'px';
newP.style.left = (300-w/2) + 'px';
newP.style.filter = 'progid:DXImageTransform.Microsoft.Alpha( opacity = ' + alpha + ' )';
//newP.style.-moz-opacity = alpha_2;
//newP.style.-khtml-opacity = alpha_2;
newP.style.opacity = alpha_2;
newP.style.zIndex = t;
parent.appendChild(newP);
//alert(alpha_2);
if(t == 5)
document.getElementById('divId_' + t).innerHTML = '<img id="img_' + t + '" align="absmiddle" onclick="zamena(this)" src="12.jpeg" width=' + (300+w) + ' height=' + ( Math.round((300+w)*0.75) ) + ' />';
else
document.getElementById('divId_' + t).innerHTML = '<img id="img_' + t + '" align="absmiddle" onclick="zamena(this)" src="1.jpg" width=' + (300+w) + ' height=' + ( Math.round((300+w)*0.75) ) + ' />';
j+= 10;
}
window.onload = function(){
for(i=0; i<6; i++){
createElem(i);
}
};
</script>
|
|
Создание фотогалереи, анимированный выбор картинок, сделал на 95 %, 5% не могу доделать 
Загрузка ...
