جافا سكريبت:
كود البرنامج
/*
اسم الوظيفة: التمرير
التمرير (obj، h، s)
وصف المعلمة:
obj، قيمة معرف [الكائن] أو الكائن مطلوب
h،[الارتفاع] الارتفاع بعد التوسيع اختياري (الافتراضي هو 200 بكسل).
s، سرعة التوسعة [السرعة]، كلما كانت القيمة أصغر، كانت سرعة التوسعة أبطأ اختياري (الافتراضي هو 1.2) {القيمة الموصى بها بين 1.1 و2.0 [على سبيل المثال: 1.17]}.
قيمة إرجاع الوظيفة:
توسيع حقيقي (ارتفاع الكائن يساوي الارتفاع الموسع)
خطأ (ارتفاع الكائن يساوي الارتفاع الأصلي)
*/
دالة التمرير (obj، h، s) {
فار ح = ح ||.200;
فار س = س ||.1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
إذا (obj == غير محدد) {إرجاع خطأ؛}
var Status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "مخفي";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}آخر{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
فار إعادة تعيين = وظيفة () {
إذا (الحالة) {
إذا (يا <ح) {
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}آخر{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}آخر{
obj.style.height = oldH+"px";
obj.removeAttribute("الحالة");
window.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
حالة العودة؛
}
window.onload= الدالة(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = function(){
Scroll('test',this.scrollHeight,1.2);
}
$('القائمة').onclick = function(){
Scroll('menu',this.scrollHeight,1.2);
}
}
كود HTML:
رمز البرنامج
<دل>
<dt id="btn" style="cursor:pointer; الخلفية اللون:#009999; العرض:200px;">التوسيع والطي</dt>
<dd id = "test" style = "background-color: #33CCCC؛ تجاوز السعة: مخفي؛ العرض: 200px؛ الارتفاع: 0؛">
محتوى
</دد>
</دل>
رمز البرنامج
<div id = "menu" style = "border:1px Solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
محتوى محتوى محتوى محتوى محتوى
</div>