30/10/2011, 02:23
|
| | | Fecha de Ingreso: septiembre-2011
Mensajes: 158
Antigüedad: 12 años, 7 meses Puntos: 15 | |
| Respuesta: esta funcion debe desplegararse mas rapido y depende del tiempo pero esta
Cita:
Iniciado por jor_0203  esta función solo tiene un problema el div se va haciendo mas chico o más grande pero el contenido no desaparece cuando lo hacemos muy chiquito
hay que ver como borramos el contenido
ojala alguien pueda dar una idea ESO SE ASE CON CSS ACA TE DEJO TU CODIGO CORREGIDO QUE ELIMINA TAMBIEN EL CONTENIDO CUANDO EL CUADRITO SE ASE PEQUEÑO
Código:
<!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: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
background:#FFCC00;
border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
var g, tt;
var p=0,t;
function mover(obj){
if(p>350){
clearTimeout(t);
p=0;
return;
}
p+=5;
document.getElementById(obj).style.height=p+'px';
document.getElementById(obj).style.width=p+'px';
t=setTimeout( function(){ mover(obj) },30 ); }
function restar(obj){
g=parseInt(document.getElementById(obj).style.height);
document.getElementById("fg").innerHTML = g;
if(g<=0){
clearTimeout(tt);
g=0;
return;
}
g-=5;
document.getElementById("fg").innerHTML =g;
document.getElementById(obj).style.height=g+'px';
document.getElementById(obj).style.width=g+'px';
tt=setTimeout( function(){ restar(obj) },30 ); }
</script>
</head>
<body>
<a onclick="mover('cuadros')">cuadro uno mosatar </a> <a onclick="restar('cuadros')">cuadros uno pregar</a> <a onclick="mover('cuadro')">cuadro dos</a>
<a onclick="restar('cuadro')">cuadro dos pregar</a>
<div class="contenedor" >
<div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
<br />
<br />
<br />
<div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
</div>
<div id="fg"></div>
</body>
</html>
|