Javascript:
kode program
/*
Nama fungsi: Gulir
Gulir (obj, h, s)
Deskripsi parameter:
obj, nilai id [objek] atau objek
h,[tinggi] Tinggi setelah perluasan. Opsional (default adalah 200px)
s, [kecepatan] kecepatan ekspansi, semakin kecil nilainya, semakin lambat kecepatan ekspansi. Opsional (defaultnya adalah 1.2) {nilai yang disarankan adalah antara 1.1 dan 2.0 [misalnya: 1.17]}.
Nilai pengembalian fungsi:
true expand (tinggi benda sama dengan tinggi benda yang diperluas)
false off (tinggi benda sama dengan tinggi semula)
*/
functionGulir(obj, h, s){
var jam = jam ||.200;
var s = s ||.1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == tidak terdefinisi){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "blok";
obj.style.overflow = "tersembunyi";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}kalau tidak{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var atur ulang = fungsi(){
jika(status){
jika(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}kalau tidak{
obj.setAttribute("status",salah);
window.clearInterval(IntervalId);
}
}kalau tidak{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
status pengembalian;
}
jendela.onload= fungsi(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = fungsi(){
Gulir('uji',ini.scrollHeight,1.2);
}
$('menu').onclick = fungsi(){
Gulir('menu',ini.scrollHeight,1.2);
}
}
Kode HTML:
kode program
<dl>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">Perluas dan ciutkan</dt>
<dd id="test" style="background-color:#33CCCC; overflow:hidden; lebar:200px; tinggi:0;">
isi
</dd>
</dl>
kode program
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
konten konten konten konten konten
</div>