efectos y manipulacion de capaz

seik! · #1 (**permalink**) 11/01/2008, 13:38

Estimados...

Alguno de ustedes sabe como logro el efecto de capaz como por ejemplo el de este sitio al buscar se despliega progresivamente la capa... es un efecto interesante pero no tengo idea como lo logro hahahaha

otra cosa.. conosco como mostrar y ocular capas.. eso no tengo problemas... pero como hago que darle el atributo de que aparesca en una posicion dinamica, osea.. si pongo el mouse sobre un link aparesca justo donde puse el mouse... sin indicarle que aparesca en una posicion definida...

espero me puedan ayudar para dar mejores resultados al ocupar esta tecnologia...

Saludos,

Panino5001 · #2 (**permalink**) 12/01/2008, 17:04

Fijate si esto te sirve como orientación:

Código PHP:

  <!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=iso-8859-1" />
<title>test</title>
<script>
function $(id){
    return document.getElementById(id);
}
function easingOut(obj,prop,inicio,fin,tiempo,rozamiento,unidad){
var i=setInterval(function(){
obj.style[prop]=fin-(fin-parseInt(obj.style[prop]))*rozamiento+unidad;
if(parseInt(obj.style[prop])/fin*100 >= 99){
obj.style[prop]=fin+unidad;
clearInterval(i);
}
},tiempo);
}

function easingIn(obj,prop,inicio,fin,tiempo,rozamiento,unidad){
var i=setInterval(function(){
obj.style[prop]=Math.abs(fin-(fin-parseInt(obj.style[prop]))*rozamiento)+unidad;
if(parseInt(obj.style[prop])/fin == 1){
obj.style[prop]=fin+unidad;
clearInterval(i);
}
},tiempo);
}

window.onload=function(){
$('abrir').onclick=function(){
easingOut($('pp'),'width',1,500,10,.6,'px');
easingOut($('pp'),'height',1,500,10,.6,'px');
}

$('cerrar').onclick=function(){
easingIn($('pp'),'width',500,1,10,.6,'px');
easingIn($('pp'),'height',500,1,10,.6,'px');
}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input id="abrir" type="button" name="abrir" value="abrir" />
  <input id="cerrar" type="button" name="cerrar" value="cerrar" />
  <div id="pp" style="background:#FFCC33;position:relative;width:1px;height:1px;overflow:hidden;">hola<br />
hola<br />
hola</div>
</form>
</body>
</html>

seik! · #3 (**permalink**) 14/01/2008, 14:47

Compadre.. es justo lo que necesitaba... muchas gracias... con esto puedo contruir lo que necesito :)

Se agradece.. byes!