JavaScript:
プログラムコード
/*
機能名：スクロール
スクロール(obj, h, s)
パラメータの説明:
obj,[object] ID 値またはオブジェクト。
h,[height] 拡張後の高さ (デフォルトは 200px)。
s, [speed] 展開速度、値が小さいほど展開速度が遅くなります (デフォルトは 1.2) {推奨値は 1.1 ～ 2.0 (例: 1.17)}。
関数の戻り値:
true Expand (オブジェクトの高さは拡張後の高さに等しい)
false オフ (オブジェクトの高さは元の高さに等しい)
*/
functionScroll(obj, h, s){
変数 h = h || 200;
変数 s = 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == 未定義){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(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 = function(){
if(ステータス){
if(ああ < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}それ以外{
obj.setAttribute("ステータス",false);
window.clearInterval(IntervalId);
}
}それ以外{
obj.style.height = oldH+"px";
obj.removeAttribute("ステータス");
window.clearInterval(IntervalId);
}
}
varIntervalId = window.setInterval(reSet,10);
ステータスを返す。
}
window.onload= function(){
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コード:
プログラムコード
<dl>
<dt id="btn" style="cursor:pointer;background-color:#009999; width:200px;">展開と折りたたみ</dt>
<dd id="test" style="background-color:#33CCCC; overflow:hidden; width:200px; height:0;">
コンテンツ
</dd>
</dl>
プログラムコード
<div id="menu" style="border:1px Solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ
</div>