จาวาสคริปต์:
รหัสโปรแกรม
-
ชื่อฟังก์ชัน: เลื่อน
เลื่อน(obj, h, s)
คำอธิบายพารามิเตอร์:
obj, [วัตถุ] ค่ารหัสหรือวัตถุ จำเป็น
h, [ความสูง] ความสูงหลังการขยาย ไม่บังคับ (ค่าเริ่มต้นคือ 200px)
s, ความเร็วในการขยาย [ความเร็ว] ยิ่งค่าน้อย ความเร็วในการขยายก็จะยิ่งช้าลง ตัวเลือกเสริม (ค่าเริ่มต้นคือ 1.2) {ค่าที่แนะนำคือระหว่าง 1.1 ถึง 2.0 [ตัวอย่าง: 1.17]}
ค่าส่งคืนฟังก์ชัน:
ขยายจริง (ความสูงของวัตถุเท่ากับความสูงที่ขยาย)
false off (ความสูงของวัตถุเท่ากับความสูงเดิม)
-
functionScroll (obj, h, s) {
วาร์ ชั่วโมง = ชั่วโมง ||. 200;
วาร์ s = s ||.
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
ถ้า (obj == ไม่ได้กำหนด) {ส่งคืนเท็จ;}
สถานะ var = obj.getAttribute("สถานะ")==null;
var โอ้ = parseInt(obj.offsetHeight);
obj.style.height = โอ้;
obj.style.display = "บล็อก";
obj.style.overflow = "ซ่อน";
ถ้า (obj.getAttribute ("oldHeight") == null) {
obj.setAttribute("oldHeight", โอ้);
}อื่น{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
-
var รีเซ็ต = ฟังก์ชั่น () {
ถ้า (สถานะ) {
ถ้า(โอ้ <h){
โอ้ = Math.ceil(h-(h-oh)/s);
obj.style.height = โอ้+"px";
}อื่น{
obj.setAttribute("สถานะ",เท็จ);
window.clearInterval(IntervalId);
-
}อื่น{
obj.style.height = oldH+"px";
obj.removeAttribute("สถานะ");
window.clearInterval(IntervalId);
-
-
varIntervalId = window.setInterval(ตั้งค่าใหม่,10);
สถานะการคืน;
-
window.onload= ฟังก์ชัน(){
var $ = function(id){return document.getElementById(id)};
$('btn').onclick = function(){
เลื่อน('ทดสอบ',this.scrollHeight,1.2);
-
$('เมนู').onclick = ฟังก์ชั่น(){
เลื่อน('เมนู',this.scrollHeight,1.2);
-
-
รหัส HTML:
รหัสโปรแกรม
<ดล>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">ขยายและยุบ</dt>
<dd id="test" style="พื้นหลังสี:#33CCCC; ล้น:hidden; ความกว้าง:200px; ความสูง:0;">
เนื้อหา
</dd>
</ดล>
รหัสโปรแกรม
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
เนื้อหา เนื้อหา เนื้อหา เนื้อหา เนื้อหา
</div>