Oops.. Este post tiene los enlaces eliminados!

Identi revisa las denuncias de los usuarios en busca de enlaces eliminados que no dejan descargar los archivos, este mensaje te informa que este post que estas viendo tiene los enlaces eliminados.

Usa el Buscador

Por favor, te recomendamos que uses el buscador para encontrar más alternativas.

Div animado en javascript

  • Categoría: Reciclaje
  • Publicado hace más de 3 años
Les dejo el codigo de un div animado en javascript, no en el sentido de moverse sino en el sentido de la forma de aparecer en la pagina, abajo el video.



Abajo el codigo completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {background-color:white;
      background-image:url(file:/programatodo/imagenes/fondo.jpg)}
.uno {position:absolute;
      top:100px;
  left:100px;
  background-color:red;
  width:250px;
  height:300px;
  opacity:0;
  }
.dos {position:absolute;
      top:100px;
  left:400px;
  background-color:blue;
  width:250px;
  height:300px;
  opacity:0;
}
.tres {position:absolute;
      top:100px;
  left:700px;
  background-color:blue;
  width:250px;
  height:300px;
  opacity:0;
}
.boton {position:absolute;
        top:500px;
left:300px;
height:50px;
width:50px;
background-color:#FF8040;
}

</style>
</head>

<body>
<div class="uno" id="uno">
</div>
<div class="dos" id="dos">
</div>
<div class="tres" id="tres">
</div>
<div class="boton" id="boton">
</div>
<script type="text/javascript">
var uno=document.getElementById('uno');
var dos=document.getElementById('dos');
var tres=document.getElementById('tres');
var boton=document.getElementById('boton');
var opafin=0.7900000000000005;
var a=0.00;
var aa=0.80;

function aparecer(param1)

  var par1
  par1=param1     
  par1.style.opacity=a;
  a=a+0.01;   
  var b=a.toFixed(2);   
  if (b==0.80)
    {
     clearInterval(tiempo);
     a=0.00;
     c=uno.style.opacity;
     uno.innerHTML=c;  
    }
}  

function llamar1()
{   
   tiempo=setInterval('aparecer(uno)',40);    
 }  
function llamar2()
{
 tiempo=setInterval('aparecer(dos)',40);    
}

function llamar3()
{
  tiempo=setInterval('aparecer(tres)',40);    
}

function desaparecer(param1)
{
   var par1;
    par1=param1;
    par1.style.opacity=aa;
    aa=aa-0.01;
    var bb=aa.toFixed(2);  
    if (bb==0.00)
     { 
      clearInterval(tiempo1)
      aa=0.80;   
     }
}  

function comprobar()
{     
      if(uno.style.opacity==opafin || dos.style.opacity==opafin || tres.style.opacity==opafin)
    {
         if (uno.style.opacity==opafin)
        {
         tiempo1=setInterval('desaparecer(uno)',40)
         llamar2();
         }
         else if(dos.style.opacity==opafin)
         {
          tiempo1=setInterval('desaparecer(dos)',40)
          llamar3();
         }
          else if(tres.style.opacity==opafin)
         {
          tiempo1=setInterval('desaparecer(tres)',40);
          llamar1();
         }
    }
    else
   {
    llamar1();
   } 
}

document.getElementById('boton').addEventListener('click',comprobar,false);
</script>
</body>
</html>


Espero que les haya gustado, hasta la proxima.
La explicacion del codigo la pueden encontrar en mi blog

http://programacomoyo.blogspot.com.ar/2013/03/div-animado-buenas-gente-en-este.html
Div animado en javascript
0 Puntos Score: 0/10
Visitas: 583 Favoritos: 1
1 Comentarios Div animado en javascript
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!