Javascript:
código do programa
/*
Nome da função: Rolar
Rolar (obj, h, s)
Descrição do parâmetro:
obj,[objeto] id valor ou objeto Obrigatório.
h,[height] Altura após expansão Opcional (o padrão é 200px)
s, [velocidade] velocidade de expansão, quanto menor o valor, mais lenta será a velocidade de expansão Opcional (o padrão é 1,2) {o valor recomendado está entre 1,1 e 2,0 [por exemplo: 1,17]}.
Valor de retorno da função:
expansão verdadeira (a altura do objeto é igual à altura expandida)
false off (a altura do objeto é igual à altura original)
*/
functionScroll(obj, h, s){
var h = h || 200;
var s = s || 1,2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == indefinido){retornar falso;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.estilo.altura = oh;
obj.style.display = "bloquear";
obj.style.overflow = "oculto";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}outro{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
se(estado){
se(oh <h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}outro{
obj.setAttribute("status",falso);
janela.clearInterval(IntervalId);
}
}outro{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
janela.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
status de retorno;
}
janela.onload= função(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = function(){
Scroll('teste',this.scrollHeight,1.2);
}
$('menu').onclick = function(){
Scroll('menu',this.scrollHeight,1.2);
}
}
Código HTML:
código do programa
<dl>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">Expandir e recolher</dt>
<dd id="test" style="background-color:#33CCCC; overflow:hidden; width:200px; height:0;">
contente
</dd>
</dl>
código do programa
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
conteúdo conteúdo conteúdo conteúdo conteúdo
</div>