Javascript:
código del programa
/*
Nombre de la función: Desplazamiento
Desplazarse (obj, h, s)
Descripción del parámetro:
obj,[objeto] valor de identificación u objeto Requerido.
h,[altura] Altura después de la expansión Opcional (el valor predeterminado es 200px).
s, velocidad de expansión [velocidad], cuanto menor sea el valor, más lenta será la velocidad de expansión Opcional (el valor predeterminado es 1,2) {el valor recomendado está entre 1,1 y 2,0 [por ejemplo: 1,17]}.
Valor de retorno de la función:
verdadera expansión (la altura del objeto es igual a la altura expandida)
falso (la altura del objeto es igual a la altura original)
*/
funciónDesplazamiento(obj, h, s){
var h = h || 200;
var s = s || 1,2;
var obj = typeof(obj)=="cadena"?document.getElementById(obj):obj;
if(obj == indefinido){return false;}
var estado = obj.getAttribute("estado")==null;
var oh = parseInt(obj.offsetHeight);
obj.estilo.altura = oh;
obj.style.display = "bloquear";
obj.style.overflow = "oculto";
if(obj.getAttribute("oldHeight") == nulo){
obj.setAttribute("alturaantigua", oh);
}demás{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var restablecer = función(){
si(estado){
si(oh <h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}demás{
obj.setAttribute("estado",falso);
ventana.clearInterval(IntervalId);
}
}demás{
obj.style.height = antiguoH+"px";
obj.removeAttribute("estado");
ventana.clearInterval(IntervalId);
}
}
varIntervalId = ventana.setInterval(reSet,10);
estado de devolución;
}
ventana.onload= función(){
var $ = función(id){return document.getElementById(id)};
$('btn').onclick = función(){
Scroll('prueba',this.scrollHeight,1.2);
}
$('menú').al hacer clic = función(){
Scroll('menú',this.scrollHeight,1.2);
}
}
código HTML:
código de programa
<dl>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">Expandir y contraer</dt>
<dd id="test" style="fondo-color:#33CCCC; desbordamiento: oculto; ancho: 200px; alto: 0;">
contenido
</dd>
</dl>
código de programa
<div id="menu" style="borde:1px sólido #ccc;ancho:160px;alto:16px;text-align:center;cursor:pointer;overflow:hidden;">
contenido contenido contenido contenido contenido
</div>