Форум

galileopro · #21 (**permalink**) 27.04.2009, 15:42

Спасибо, x-yuri, за замечания. К счастью этот код работает.

А вот с затуханием слайдов атк ничего и не получилось

.

x-yuri · #22 (**permalink**) 27.04.2009, 17:18

Цитата:

К счастью этот код работает

ты про 1) и 2) ?
а вот 3) объясняет, почему у тебя затухания не работают. Потому что ты можешь убрать ту строчку и ничего не изменится - у тебя каждый запущенный процесс затухания никогда не заканчивается

galileopro · #23 (**permalink**) 27.04.2009, 20:09

Он заканчивается, когда k==100 (когда одно из изображений имеет максимальную яркость). Говорил я про 1 код)). Ну 2 и 3 имеют одну и ту же проблему и если понять как исправить 3(он короче), то 2 - раз плюнуть))

galileopro · #24 (**permalink**) 27.04.2009, 20:19

2 лучше не смотреть, чтобы время не тратить. Я специально выложил 3 для упрощения формулировки проблемы. Замечу еще, что проверяю я только условие k==100, так как в этот момент l==0(типа первое изображение стало максимально ярким, а второе - затухло).

x-yuri · #25 (**permalink**) 28.04.2009, 00:26

Цитата:

Он заканчивается, когда k==100 (когда одно из изображений имеет максимальную яркость)

он не заканчивается, я же говорю если ты уберешь "if(k==100)return;", то ничего в твоем коде не измениться. Т.е. у тебя каждые 5 сек запускаются процессы затухания, и ни один из них никогда не заканчивается
добавь в начало функции next:

var div = document.getElementById('div_'+date);
	if(! div) {
		div = document.createElement('div');
		div.id = 'div_'+date;
		document.body.appendChild( div );
	}
	div.innerHTML = Number(div.innerHTML)+1;

и запускай next следующим образом:

setTimeout('next("'+(new Date())+'")',500);

Цитата:

Ну 2 и 3 имеют одну и ту же проблему и если понять как исправить 3(он короче), то 2 - раз плюнуть))

нет, это разные проблемы
p.s. под 1, 2, 3 я подразумеваю номера замечаний, а ты, кажется, свои варианты кода. Замечания 1-3 касаются последнего твоего варианта кода

galileopro · #26 (**permalink**) 28.04.2009, 19:50

Спасибо, x-yuri. Но твой код у меня не заработал, и некоторые команды я не понял(я еще на пути к позаннию тайн мастерства). Например, что такое document.body.appendChild( div ); и next.i = 0; из второго замечания. Если можешь, то скажи елементы какого скрипта(DOM, innerHTML или что-то другое) ты использовал, я почитаю, чтобы разобраться. Ну а код я чудесным образом оживил, если сможешь, то скажи какие недостатки в этом варианте.

<script>
var l=100;
var k=0; 
function next(){
if(k<100){l=l-1;
document.getElementById("before").width=400;
document.getElementById("before").height=300;
document.getElementById("before_div").style.filter ="alpha(opacity="+l+")";
k++;
document.getElementById("after").width=400;
document.getElementById("after").height=300;
document.getElementById("after_div").style.filter ="alpha(opacity="+k+")";
setTimeout("next()",5);}
}
 
function Slaid(){

l=100; 
k=0; 
document.getElementById("before").src="scrin3.jpg";
document.getElementById("after").src="scrin4.jpg";
setTimeout('next()',500);
setTimeout('Slaid()',4000);
}
</script>
 
<style>
.pic { position: absolute; top: 40px; left: 10px }
</style>
 
<body onload="setTimeout('Slaid()',1000)"> 
<div id="after_div" class="pic"><img id="after" src="scrin3.jpg" width=400 height=300></div>
<div id="before_div" class="pic"><img id="before" src="scrin4.jpg" width=400 height=300></div>
</body>

И в Опере это не работает, так как фильтров там нет. Ну я переделаю так как ты советовал в замечании 2) а пока открывать надо в ie.

x-yuri · #27 (**permalink**) 28.04.2009, 20:40

вот что должно было получиться (там надо было еще пару изменений внести, тут видно, что ни одно затухание фактически не заканчивается):

<html>
<head>
<title>Затухание слайдов</title>
<script>
var l=100;
var k=0; 
function next( date ){
	var div = document.getElementById('div_'+date);
    if(! div) {
        div = document.createElement('div');
        div.id = 'div_'+date;
        document.body.appendChild( div );
    }
    div.innerHTML = Number(div.innerHTML)+1;
l=l-1;
document.getElementById("before").width=400;
document.getElementById("before").height=300;
document.getElementById("before_div").style.filter ="alpha(opacity="+l+")";
k++;
document.getElementById("after").width=400;
document.getElementById("after").height=300;
document.getElementById("after_div").style.filter ="alpha(opacity="+k+")";
setTimeout("next('"+date+"')",50);
if(k==100)return;
}
 
function Slaid(){
l=100; 
k=0; 
document.getElementById("before").src="scrin1.jpg";
document.getElementById("after").src="scrin2.jpg";
setTimeout('next("'+(new Date())+'")',500);
setTimeout('Slaid()',5000);
}
</script>
 
<style>
.pic { position: absolute; top: 40px; left: 10px }
</style>
 
<body onload="setTimeout('Slaid()',1000)"> 
<div id="after_div" class="pic"><img id="after" src="scrin1.jpg" width=400 height=300></div>
<div id="before_div" class="pic"><img id="before" src="scrin2.jpg" width=400 height=300></div>
</body>
</html>

твою задачу я бы решил так (запускать не пробовал):

function next( continue ) {

	if(! continue)
		arguments.callee.opacity = 0;
	if(arguments.callee.opacity == 100)
		return;
	opacity( document.getElementById("before_div"), 100-arguments.callee.opacity );
	opacity( document.getElementById("after_div"), arguments.callee.opacity );
            arguments.callee.opacity++;
	setTimeout("next(true);",5);
}


function opacity( el, v ) {

	el.style.opacity = v;
	el.style.MozOpacity = v;
	el.style.KhtmlOpacity = v;
	el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (v*100) + ')';
}

 
function Slaid(){
 
	document.getElementById("before").src="scrin3.jpg";
	document.getElementById("after").src="scrin4.jpg";
	setTimeout('next();',500);
	setTimeout('Slaid();',4000);
}

можешь еще почитать http://www.tigir.com/opacity.htm (там более универсальный способ задания прозрачности, учитывается, что могут быть назначены другие фильтры)

document.body.appendChild( div );

добавляем в конец документа элемент, который хранится в переменной div

next.i = 0;

функции в js являются объектами, поэтому информацию, необходимую лишь функции, лучше хранить в ней самой. К этой, своей, переменной можно обращаться также, но иногда удобнее не упоминать имя (а вдруг оно измениться) или имени просто нету (анонимная функция). Тогда внутри самой функции пишут arguments.callee.i (arguments.callee - ссылка на функцию, в которой сейчас находимся)
p.s. недостатки твоего варианта: 1) использование глобальных переменных; 2) еще лучше избегать лишних уровней вложенности... вместо

if(k<100){
    l=l-1;
    ...
}

лучше писать

if(k>=100)
    return;
l=l-1;
...

galileopro · #28 (**permalink**) 28.04.2009, 21:23

Фух, просветил

Теперь все более-менее прозрачно.

Форум

Справочник

Discord чат

Курсы javascript