Efecto en javascript

chaleko · #1 (**permalink**) 23/10/2007, 13:36

Hola

Me gustaria saber si esposible generar una columanas tabla o div dinamicamente.

Por ejemplo tengo un div llamadao columna derecha que esta oculta y quiero que al apretar un boton aparezca dinamicamente es decir con un alpha o con una mascara de derecha a izquierda.

Se puede eso hay trucos o tutoriales de animar layer div table con javascript o css nose algo

Gracias!

KarlanKas · #2 (**permalink**) 24/10/2007, 03:34

Así?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html>
<head>
    <title>Untitled</title>
    
    <style>
    #izquierda{
    position:relative;
    float:left;
    background:#ff3333;
    border:solid 1px #ee9999;
    width:400px;
    height:600px;
    }
    #derecha{
    margin-left:10px;
    position:relative;
    float:left;
    background:#33ccff;
    border:solid 1px #0033cc;
    width:400px;
    height:600px;
    filter: alpha(opacity=0); 
    opacity: 0
    
    }
    
    </style>
    <script type="text/javascript" charset="ISO-8859-1">
        var pepe;
        var b=0;
        var variable=0.1
        function mostrarCapa(x){
            document.getElementById("disparador").disabled=true;
            c=document.getElementById("derecha");
            if(!x){x=b}
            b=x+variable;
            c.style.opacity= b;  //Firefox
            c.style.filter="alpha(opacity="+(b*100)+")"; //IE
            if(b<1 && b>0){
                pepe=setTimeout("mostrarCapa(b)",100);
            }
            else{
                clearTimeout(pepe);
                variable*=-1
                document.getElementById("disparador").value=(variable==-0.1)?"¡Oh capa de la derecha! Desaparece!!":"¡Oh capa de la derecha! Aparece!!";
                document.getElementById("disparador").disabled=false;
            }
        }
    </script>
</head>

<body>
<div id="izquierda"><br /><br />
<br />

<center>
<input type="button" value="¡Oh capa de la derecha! Aparece!!" id="disparador" onclick="mostrarCapa()"/><br />
</center>

</div>
<div id="derecha"></div>



</body>
</html>

Un saludo!

chaleko · #3 (**permalink**) 28/10/2007, 21:14

Excelente!! muy bueno el efecto

y Para mover capas de izquierda a dereche o derecha a izquierda??????

Saludos!!

GRACIAS

KarlanKas · #4 (**permalink**) 29/10/2007, 01:42

¿Así?

Código PHP:

  
<html>
<head>
    <title>Untitled</title>
    
    <style>
    #izquierda{
    position:relative;
    float:left;
    background:#ff3333;
    border:solid 1px #ee9999;
    width:400px;
    height:600px;
    z-index:2
    }
    #derecha{
    margin-left:0px;
    position:relative;
    float:left;
    background:#33ccff;
    border:solid 1px #0033cc;
    width:400px;
    height:600px;
    filter: alpha(opacity=0); 
    margin-left:-400px;
    z-index:1;
    opacity: 0
    
    }
    
    </style>
    <script type="text/javascript" charset="ISO-8859-1">
        var pepe;
        var b=0;
        var variable=0.1
        function mostrarCapa(x){
            document.getElementById("disparador").disabled=true;
            c=document.getElementById("derecha");
            if(!x){x=b}
            b=x+variable;
            c.style.opacity= b;  //Firefox
            c.style.filter="alpha(opacity="+(b*100)+")"; //IE
            c.style.marginLeft=(-400+(b*400))+"px";
            if(b<1 && b>0){
                pepe=setTimeout("mostrarCapa(b)",100);
            }
            else{
                clearTimeout(pepe);
                variable*=-1
                document.getElementById("disparador").value=(variable==-0.1)?"¡Oh capa de la derecha! Desaparece!!":"¡Oh capa de la derecha! Aparece!!";
                document.getElementById("disparador").disabled=false;
            }
        }
    </script>
</head>

<body>
<div id="izquierda"><br /><br />
<br />

<center>
<input type="button" value="¡Oh capa de la derecha! Aparece!!" id="disparador" onclick="mostrarCapa()"/><br />
</center>

</div>
<div id="derecha"></div>



</body>
</html>

Un saludo!

maiforquilla · #5 (**permalink**) 24/11/2009, 04:49

Hola,

lo he probado y funciona muy bien!!!
pero yo tengo una pregunta, como se podria hacer que apareciera una tabla al entrar en la pagina, que apareciera de la nada. sin apretar botones e hiciera una opacidad de 0 a 100 y se quedara así.

saludos,

Mai

estoy probando con esto, pero no sé como hacerlo....

<html>
<head>

<title>Untitled</title>

<style>
#izquierda{
position:relative;
float:left;
background:#ff3333;
border:solid 1px #ee9999;
width:400px;
height:600px;
}
#derecha{
margin-left:10px;
position:relative;
float:left;
background:#33ccff;
border:solid 1px #0033cc;
width:400px;
height:600px;
filter: alpha(opacity=0);
opacity: 0

}

</style>
<script type="text/javascript" charset="ISO-8859-1">
var pepe;
var b=0;
var variable=0.1
function mostrarCapa(x){
document.getElementById("disparador").disabled=tru e;
c=document.getElementById("derecha");
if(!x){x=b}
b=x+variable;
c.style.opacity= b; //Firefox
c.style.filter="alpha(opacity="+(b*100)+")"; //IE
if(b<1 && b>0){
pepe=setTimeout("mostrarCapa(b)",100);
}
else{
clearTimeout(pepe);
variable*=-1
document.getElementById("disparador").value=(varia ble==-0.1)?"¡Oh capa de la derecha! Desaparece!!":"¡Oh capa de la derecha! Aparece!!";
document.getElementById("disparador").disabled=fal se;
}
}
</script>
</head>

<body>

<div id="izquierda">
<center>
<input type="button" value="¡Oh capa de la derecha! Aparece!!" id="disparador" onclick="mostrarCapa()"/><br />
</center>
</div>
<div></div>
<table id="derecha">
<tr>
<td><span style="font-color:#ffffff;">hola cocacola</span></td>
</tr>
</table>

</body>
</html>

jor_0203 · #6 (**permalink**) 30/10/2011, 03:36

Cita:

Iniciado por chaleko

Excelente!! muy bueno el efecto

y Para mover capas de izquierda a dereche o derecha a izquierda??????

Saludos!!

GRACIAS

function mostrarCapa(x)
{
para que es la x
cual es el valor que toma