자바스크립트:
프로그램 코드
/*
기능명 : 스크롤
스크롤(obj, h, s)
매개변수 설명:
obj,[개체] ID 값 또는 개체입니다.
h,[height] 확장 후 높이. 선택 사항(기본값은 200px)
s, [speed] 확장 속도, 값이 작을수록 확장 속도가 느려집니다. 선택 사항(기본값은 1.2) {권장 값은 1.1에서 2.0 사이입니다[예: 1.17]}.
함수 반환 값:
true 확장(객체의 높이는 확장된 높이와 동일함)
false off(객체의 높이가 원래 높이와 동일함)
*/
functionScroll(obj, h, s){
var h = h ||
var s = 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == 정의되지 않음){return false;}
var status = obj.getAttribute("status")==null;
var oh = parsInt(obj.offsetHeight);
obj.style.height = 아;
obj.style.display = "블록";
obj.style.overflow = "숨김";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", 오);
}또 다른{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = 함수(){
if(상태){
if(오 < h){
오 = 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 = 함수(){
Scroll('테스트',this.scrollHeight,1.2);
}
$('메뉴').onclick = 함수(){
Scroll('메뉴',this.scrollHeight,1.2);
}
}
HTML 코드:
프로그램 코드
<DL>
<dt id="btn" style="cursor:pointer; background-color:#009999; width:200px;">확장 및 축소</dt>
<dd id="test" style="배경색:#33CCCC; 오버플로:숨김; 너비:200px; 높이:0;">
콘텐츠
</dd>
</dl>
프로그램 코드
<div id="menu" style="border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠
</div>