슬라이딩 공지사항 레이어
관리자 05-01-13 16:46
 source01.html (4.7K), DOWN:30
<html>

<head>

<title> </title>

<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">

<style type="text/css">
A:link    {color: blue; text-decoration: none}
A:visited  {color: black; text-decoration: none}
A:active  {text-decoration: none;color:black; font-weight:none }
A:hover    {text-decoration: none;color:red; font-weight:none;cursor=hand;}
#outline1{
width: 300px;                /*외곽 레이어의 너비 */
height: 100px;              /*외곽 레이어의 높이*/
position:absolute;
z-index: 10;
overflow:hidden;
visibility: hidden;
}

#outline2{
width: 280px;                /*안쪽 레이어의 너비(위 레이어 너비보다 작게 하세요) */
height: 80px;                /*안쪽 레이어의 높이(위 레이어 높이보다 작게 하세요) */
border: 2px solid gray;      /*안쪽레이어의 테두리 형태와 색상*/
background-color: #E7EFF7;  /*공지사항 배경색*/
padding: 5px;                /*공지사항 여백*/
position:absolute;
left: 0;
top: 0;
}
</style>

<script type="text/javascript">
var slidingleft=0            //화면왼쪽으로 부터의 위치 설정가능
var slidingtop=0            //화면 위쪽으로 부터의 위치 설정가능
var dropspeed=10            //내려오는 속도 (값이 클수록 빠릅니다.)

//아래 displaymode 값이 always 일 경우, 페이지 로딩시 마다 표시되고
//아래 displaymode 값이 onlyOne 일 경우, 브라우저를 새로 띄울때만 표시
var displaymode="always";

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById

function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("outline1") : document.all.outline1
crossbox=(dom)?document.getElementById("outline2"): document.all.outline2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=slidingleft+"px"
crossboxcover.style.top=slidingtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+slidingtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}

else{
clearInterval(dropstart)
crossbox.style.top=0
}
}

function fadeDownLayer(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="onlyOne" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="onlyOne")
document.cookie="droppedinv2=yes"
}
//-->
</script>

</head>

<body>

<div id="outline1">

<div id="outline2">

<table align=center>

<tr><td align=center>안녕하세요</td></tr>
<tr><td align=center><a href="#" onClick="fadeDownLayer();return false">닫기</a></td></tr>

</table>


</div>

</div>

</body>

</html>