Javascript:
Programmcode
/*
Funktionsname: Scrollen
Scrollen(obj, h, s)
Parameterbeschreibung:
obj,[Objekt]-ID-Wert oder Objekt Erforderlich
h,[height] Höhe nach Erweiterung optional (Standard ist 200px)
s, [Geschwindigkeit] Expansionsgeschwindigkeit, je kleiner der Wert, desto langsamer die Expansionsgeschwindigkeit. Optional (Standard ist 1,2) {empfohlener Wert liegt zwischen 1,1 und 2,0 [zum Beispiel: 1,17]}.
Rückgabewert der Funktion:
true expand (die Höhe des Objekts entspricht der erweiterten Höhe)
false aus (die Höhe des Objekts entspricht der ursprünglichen Höhe)
*/
functionScroll(obj, h, s){
var h = h ||. 200;
var s = s ||. 1,2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefiniert){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "versteckt";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}anders{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}anders{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}anders{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
Rückgabestatus;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = function(){
Scroll('test',this.scrollHeight,1.2);
}
$('menu').onclick = function(){
Scroll('menu',this.scrollHeight,1.2);
}
}
HTML-Code:
Programmcode
<dl>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">Erweitern und reduzieren</dt>
<dd id="test" style="background-color:#33CCCC; overflow:hidden; width:200px; height:0;">
Inhalt
</dd>
</dl>
Programmcode
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt
</div>