이 기사에서는 오른쪽 하단에서 DIV 층의 확장 및 수축을 구현하는 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 오른쪽 하단 코너에서 확장 및 수축 할 수있는 div 레이어를 구현합니다 </title>
<스타일 유형 = "텍스트/CSS">
<!-
*{마진 : 0; 패딩 : 0;}
Body {Text-Align : Center;}
#메인 {테두리 : 빨간색 1px 고체; 너비 : 1000px; 높이 : 1600px; 마진 : 0 자동;}
#main #scroll {너비 : 250px; 높이 : 150px; 테두리 : 녹색 1px 고체; 텍스트-정렬 : 왼쪽; 위치 : 절대; 가시성 : 숨겨진;}
#main #scroll #open {float : 왼쪽; 텍스트-정렬 : 중심; 너비 : 180px;}
#main #scroll #close {float : right;}
//->
</스타일>
</head>
<body>
<div id = "main">
컨텐츠를 직접 개선하거나 계속 아름답게하기 위해 핵심 부분 만 구현하면 좋을 것입니다!
<div id = "scroll"> <div id = "open"onmouseover = "OpenBox ()"> <a href = "/"onclick = "OpenBox ()"> 환영 </a> <div id = "close"> <marquee align = "left"onMouseOver = "stop ()"onMouseOut = "welcome valmable 제안! </marquee> </div> </div>
<div id = "close"> <a href = "#"onclick = "closebox ()"> close </a>
<script type = "text/javaScript">
<!-
var scroll = document.getElementById ( "스크롤")
var main = document.getElementById ( "main")
var Open = document.getElementById ( "Open")
var close = document.getElementById ( "Close")
scroll.style.visibility = "Visible"
함수 runright ()
{
/*여기서 -4는 주로 더 나은 디스플레이를위한 것입니다.
scroll.style.top = document.body.scrolltop+document.body.clientHeight-Scroll.ClientHeight-4+"PX"
scroll.style.left = document.body.scrollleft+document.body.clientwidth-scroll.clientwidth-4+"px"
/*이 함수를 가끔씩 실행*/
settimeout ( "runright ()", 30)
}
/*닫기 : 감소 할 높이를 설정*/
기능 closebox ()
{
scroll.style.height = scroll.offsetheight-4+"px"
if (scroll.offsetheight> 20)
{
settimeout ( "closebox ()", 5)
}
또 다른
{
close.style.visibility = "숨겨진"
}
}
함수 OpenBox ()
{
if (scroll.offsetheight <148)
{
close.style.visibility = "Visible"
scroll.style.height = scroll.offsetheight+2+"px"
settimeout ( "OpenBox ()", 5)
}
}
runright ();
//->
</스크립트>
</div>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.