왼쪽에서 부드럽게 나오는 팝업창
아래는 본 예제의 자바스크립트 원문입니다.
아래 3000이란 부분을 수정하셔서 속도를 조절할수 있습니다. 현재 올려진 이미지는 해피CGI 해피몰솔루션의 데모베너입니다.
<html>
<head>
<title>해피CGI</title>
<script>
function getCookie( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length ){
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function setCookie( name, value, expiredays ){
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
</script>
</head>
<body>
<div id=noticelayer style='position:absolute;left:-500px; top:200px;z-index:500' >
<table width=352 height=400>
<td style="border:1px #777777 solid" bgcolor=white>
<table width=100% height=100%>
<tr><td align=center><img src="http://demo.happycgi.com/jini/popup.jpg"></td></tr>
<tr><td valign=bottom align=center><font style="font-size:11px;">해피몰데모베너입니다</font><a href="javascript:document.all.noticelayer.style.visibility='hidden';setCookie( 'nlayer', 'done' , 1);"><font style="font-size:11px;">오늘하루 안보임</font></a></td></tr>
</table>
</td>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
moveX = -500;
var timerID;
var leftmargin = 200; //왼쪽여백
function showLayerPopup() {
clearTimeout(timerID);
timerID = setTimeout("showLayerPopup()",25);
if (moveX < -10) {
moveX = moveX*0.93;
document.all.noticelayer.style.pixelLeft = moveX+ leftmargin;
} else {
clearTimeout(timerID);
timerID = setInterval('hideLayerPopup()',3000); //들어갈 시간 지정 3000=3초
}
}
function hideLayerPopup() {
clearTimeout(timerID);
timerID = setTimeout("hideLayerPopup()",25);
if (moveX > -440) {
moveX = moveX-10;
document.all.noticelayer.style.pixelLeft = moveX+30;
} else clearInterval(timerID);
}
if ( getCookie( "nlayer" ) != "done" ) timerID = setInterval('showLayerPopup()',400);
</SCRIPT>
</body>
</html>
사이트제작팁
매니져: 미정
패밀리 사이트 바로가기
![](http://demo.happycgi.com/jini/popup.jpg"></td></tr){kind=link}