Javascript :
code du programme
/*
Nom de la fonction : Défilement
Faire défiler (obj, h, s)
Description du paramètre :
obj, valeur d'identifiant [objet] ou objet Obligatoire.
h,[hauteur] Hauteur après expansion Facultatif (la valeur par défaut est 200 px).
s, [vitesse] vitesse d'expansion, plus la valeur est petite, plus la vitesse d'expansion est lente. Facultatif (la valeur par défaut est 1,2) {la valeur recommandée est comprise entre 1,1 et 2,0 [par exemple : 1,17]}.
Valeur de retour de la fonction :
true expand (la hauteur de l'objet est égale à la hauteur développée)
false off (la hauteur de l'objet est égale à la hauteur d'origine)
*/
fonctionDéfilement(obj, h, s){
var h = h || 200;
var s = s || 1,2 ;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == non défini){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.hauteur = oh;
obj.style.display = "bloquer" ;
obj.style.overflow = "caché" ;
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}autre{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = fonction(){
si(statut){
si(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}autre{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}autre{
obj.style.height = oldH+"px";
obj.removeAttribute("statut");
window.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
statut de retour ;
}
window.onload= fonction(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = fonction(){
Scroll('test',this.scrollHeight,1.2);
}
$('menu').onclick = fonction(){
Scroll('menu',this.scrollHeight,1.2);
}
}
Code HTML :
code de programme
<dl>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">Développer et réduire</dt>
<dd id="test" style="background-color:#33CCCC; overflow:hidden; width:200px; height:0;">
contenu
</dd>
</dl>
code de programme
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
contenu contenu contenu contenu contenu
</div>