[Resolvido] Alpha em imagem do IE e sem travar
Olá pessoal!
Tenho alfuns banners rotativos na home do meu site. É desses que milhares de sites possuem.
Achei melhor fazer em javascript ao invés de Flash. Teria funcionado muito bem se não fosse o meu probleminha com o IE.
o site já está no ar e é o www.cozinhaitabom.com.br (aliás, estão convidados a participar).
Abram com o IE e vejam que carroça! Era pra ser tão rápido quanto no direfox.
parte técnica:
Uso uma função chamada conta() para rodar os banners e essa função é rechamada a todo momento com o
setTimeout("conta()", 100);
dessa forma ela é executata 10x por segundo.
como quero usar um alpha + e alpha - progressivo na transição das imagens usei os:
document.getElementById("alpha").style.opacity = (alpha)/100; //para o firefox
document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')'; // para o IE
mas no ie fica lento como vocês viram
se eu retiro o
document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')'; volta a rodar rapidinho no IE, mas perco o efeito de transição.
Alguém sabe o que acontece?
segue abaixo o código todo da minha função caso queiram verificar:
//alpha ->variavel global que determina a transparencia da minha div.
//"alpha" -> id da minha div que recebe a imagem.
//contador -> variavel global quevairia de 500 a 400. De 500 a 400 alpha + na div. De 100 a 0 alpha - na div.
function conta() {
if(contador == 0) {
contador=500;
document.getElementById("it"+i).style.display = '';
document.getElementById("it"+i+'s').style.display = 'none';
if (i==4)
i=0;
else
i++;
document.getElementById("it"+i).style.display = 'none';
document.getElementById("it"+i+'s').style.display = '';
document.getElementById('alpha').innerHTML='<a href="receita.php?rec_id='+rec_id[i]+'"><img src="fotos/receitas/f1/'+banner[i]+'" border="0" /></a>';
}
if(contador > 0) {
if (contador>400) {
alpha+=5;
document.getElementById("alpha").style.opacity = (alpha)/100;
document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')';
}
if (contador<=100) {
alpha-=5;
document.getElementById("alpha").style.opacity = (alpha)/100;
document.getElementById("alpha").style.filter = 'alpha(opacity='+(alpha)+')';
}
document.getElementById('nakid').value=alpha;
contador -= 5;
setTimeout("conta()", 100);
}
}Discussão (1)
Carregando comentários...