display Toggle 함수
페이지 정보
작성자 서방님 댓글 0건 조회 177회 작성일 07-02-21 13:57본문
<html>
<head>
<script>
/*
기능 : 레이어의 display 속성을 toggle 합니다.
사용법 : HideElement(_id, _animation)
인수:
_id - toggle 할 레이어의 ID
_animation - 0 이면 애니매이션 x, 아니면 애니매이션 o
변수:
_el - 레이어 Element
_gap - 애니매이션 속도
*/
function HideElement(_id, _animation)
{
var _el = document.getElementById(_id);
var _gap = 30;
if(_animation)
_el.style.overflow = "hidden";
else
_el.style.overflow = "visible";
this.hide = function(_ani)
{
if(_ani)
{
if(parseInt(_el.style.height, 10)-_gap > 0)
{
_el.style.height = (parseInt(_el.style.height, 10)-_gap)+"px";
setTimeout("this.hide("+_ani+")", 1);
}
else
{
_el.style.display = "none";
_el.style.height = "";
}
}
else
_el.style.display = "none";
}
this.show = function(_ani)
{
if(_ani)
{
if(parseInt(_el.style.height, 10)+_gap < _el.scrollHeight)
{
_el.style.height = (parseInt(_el.style.height, 10)+_gap)+"px";
setTimeout("this.show("+_ani+")", 1);
}
else
{
_el.style.height = "";
}
}
}
if(_el.style.display == "none")
{
_el.style.display = "";
_el.style.height = 0+"px";
this.show(_animation);
}
else
{
_el.style.height = _el.scrollHeight+"px";
this.hide(_animation);
}
}
</script>
</head>
<body>
<div style="border: solid 1 #000000; cursor:pointer; float: left" onclick="HideElement('love', 1)">
눌러바 HideElement('love', 1);
</div>
<div style="border: solid 1 #000000; cursor:pointer" onclick="HideElement('love', 0)">
눌러바 HideElement('love', 0);
</div>
<div id="love" style="border: solid 1 #000000; clear:both; margin-top:20px">
열라 사랑해 <br />
열라 사랑해 <br />
열라 사랑해 <br />
열라 사랑해 <br />
나두<br />
나두<br />
나두<br />
</div>
</body>
</html>
출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=49235&sca=&sfl=wr_subject%7C%7Cwr_content&stx=toggle&sop=and&page=1
댓글목록
등록된 댓글이 없습니다.
