Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal eu estou com o seguinte problema, eu desenvolvi um banner flutuante, que aparece se movimenta pela tela e depois some, o problema que ela não aparece no IE, ele faz tudo que tem que fazer, só que simplesmente não aparece no IE, deêm uma olhada no código, ele é meu grandinho, mas está legivel.
Este código é tudo quase meu, com exceção dos fadeIn e fadeOut que eu encontrei em site na net, eu creio que o problema seja justamente ai!!!
CODE
<html>
<head>
<title>Guia e Turismo</title>
<style type="text/css">
/* Configuração padrão do banner */
.est_banner_flutuante{
z-index:3;
position:absolute;
top:0px;
left:0px;
width:200px;
height:210px;
opacity: 0;
filter:alpha(opacity=0);
}
/* Ajuste para o conteudo */
#modelo{
position:absolute;
top:10px;
}
#galeria{
position:absolute;
top:10px;
}
#fechar{
float:right;
font-size:10px;
}
/* Configuração para quando o banner estiver parado */
.parado{
z-index:3;
position:absolute;
opacity: 75;
filter:alpha(opacity=75,FinishOpacity=15, Style=1);
width:200px;
height:210px;
}
</style>
<script type="text/javascript">
//Função para controlar o banner flutuante (movimentação, aparerição, e todos os outros efeitos
var tempo;
var parado = false;
//Alterando o conteudo do banner flutuante
var mostrando='galeria';
var ocultar='modelo';
function banner_flutuante(){
//Fazendo o banner aparecer depois 5 segundos
setTimeout(function(){
fadeIn('banner_flut',0,1);
},5000);
//iniciando a movimentação do banner flutuante depois de 5 segundos e meio
setTimeout(function(){
tempo = setInterval('movimento()',50);
},5500);
//alterando o conteudo do banner a cada 10 segundos
setInterval(function(){
//algoritmo de troca
var prov = ocultar;
ocultar = mostrando;
mostrando = prov;
//alterando o conteudo
document.getElementById(mostrando).style.visibility = 'visible';
document.getElementById(ocultar).style.visibility = 'hidden';
},10000);
//Fazendo o banner desaparecer depois de 1 minuto
setTimeout(function(){
if (!parado){
parar();
}
},60000);
}
//variaveis usadas no processo de aparição e movimentação do banner
var topo = 0;
var esquerda = 0;
var aumenta_topo = true;
var aumenta_lateral = true;
//função para movimentação do banner
function movimento(){
//verificando se a variavel "topo" é igual 800, se for ele alterada o valor da variavel "aumenta_topo" para falso
if (topo==600){
aumenta_topo = false;
}else if (topo==0){
aumenta_topo = true;
}
//verificando se a variavel "esquerda" é igual 600, se for ele alterada o valor da variavel "aumenta_esquerda" para falso
if (esquerda==600){
aumenta_lateral = false;
}else if (esquerda==0){
aumenta_lateral = true;
}
//verificando o valor da variavel "aumenta_topo"
//se ela for verdadeira, a variavel "topo" recebe mais 10, senão perde 10
if (aumenta_topo){
topo += 1;
}else{
topo -= 1;
}
//verificando o valor da variavel "aumenta_esquerda"
//se ela for verdadeira, a variavel "esquerda" recebe mais 10, senão perde 10
if (aumenta_lateral){
esquerda += 2;
}else{
esquerda -= 2;
}
//atribuindo os valores de posicionamento do banner flutuante
document.getElementById('banner_flut').style.top = topo;
document.getElementById('banner_flut').style.left = esquerda;
}
//Faz aparecer o objeto
function fadeIn(id, time) {
target = document.getElementById(id);
alpha = 0;
timer = (time*1000)/100;
var i = setInterval(
function() {
if (alpha >= 100)
clearInterval(i);
setAlpha(target, alpha);
alpha += 2;
}, timer);
}
//Faz sumir o objeto
function fadeOut(id, time) {
target = document.getElementById(id);
alpha = 100;
timer = (time*1000)/100;
var i = setInterval(
function() {
if (alpha <= 0)
clearInterval(i);
setAlpha(target, alpha);
alpha -= 2;
}, timer);
}
//Altera o valor alpha do objeto
function setAlpha(target, alpha) {
target.style.filter = "alpha(opacity="+ alpha +")";
target.style.opacity = alpha/100;
}
//Reposicionando o banner quando ele for fechado
function parar(){
//parando o banner
clearInterval(tempo)
fadeOut('banner_flut',0,1);
parado = true;
//reposicionando o banner
document.getElementById('banner_flut').style.top = 10;
document.getElementById('banner_flut').style.left = 805;
//escondendo o botaõ fechar
document.getElementById('fechar').style.visibility = 'hidden';
fadeIn('banner_flut',0,1);
//passando a novo estilo do banner
document.getElementById('banner_flut').className = 'parado';
}
</script>
</head>
<body onLoad="banner_flutuante();">
<!-- Banner flutuante -->
<div id="banner_flut" class="est_banner_flutuante">
<div id="fechar"><a href="java script:parar();" title="Fechar o banner">Fechar<a></div>
<!-- Imagem 1 -->
<div id="modelo">
<img src="#" width="200px" height="200px">
</div>
<!-- Imagem 2 -->
<div id="galeria">
<img src="#" width="200px" height="200px">
</div>
</div>
</body>
</html>Obrigado!
Carregando comentários...