JavaScript 스크롤 배너 스크립트 (IE, FF 공용)
페이지 정보
본문
기존의 고정형태에서의 불편함을 보완하여 떠다니는 레이어 기능을 활용
어느곳에 코드를 삽입하여도 원하는 위치에 스크롤 배너가 보이도록 변경하였습니다.
이용팁 : 이 내용을 적용시킬 HTML문서에 직접 추가해서 사용할수 있으나. 이 경우 배너를 추가하거나 수정할때 모든 페이지를 수정해야하는 문제가 발생합니다.
이때 이 파일을 별도 생성시킨후, 적용시킬 HTML에서 include 로서 적용시킨다면 무척 편리하게 관리가 될것입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="Javascript" type="text/Javascript">
<!--
// 스크롤 배너 스크립트 시작
var scroll_time = 300;
function set_move_banner() {
window.setTimeout( "set_move_banner()", scroll_time );
top_x = 0;
top_y = document.body.scrollTop;
// scroll_banner_1 : 1번째 스크롤 배너
if( typeof( document.all.scroll_banner_1 ) == "object" ) {
is_banner_1 = true;
}
// scroll_banner_2 : 2번째 스크롤 배너
if( typeof( document.all.scroll_banner_2 ) == "object" ) {
is_banner_2 = true;
}
move_banner();
// scroll_banner_1 : 1번째 스크롤 배너
if( is_banner_1 ) {
document.all.scroll_banner_1.style.marginTop = top_y;
}
// scroll_banner_2 : 2번째 스크롤 배너
if( is_banner_2 ) {
document.all.scroll_banner_2.style.marginTop = top_y;
}
}
function move_banner() {
}
function move_banner_js_init() {
set_move_banner();
}
move_banner_js_init()
// 스크롤 배너 스크립트 끝
//-->
</script>
<style type="text/css">
<!--
#scroll_banner_1 {
position:absolute;
left:100px;
top:50px;
width:70px;
height:116px;
z-index:1;
visibility: visible;
}
#scroll_banner_2 {
position:absolute;
left:200px;
top:150px;
width:70px;
height:116px;
z-index:1;
visibility: visible;
}
-->
</style>
</head>
<body>
<div id="scroll_banner_1">
<table cellpadding=0 cellspacing=0 border="1">
<tr>
<td width="200" style="vertical-align:top;" align="center">
Happyjung.com
</td>
</tr>
</table>
</div>
<div id="scroll_banner_2">
<table cellpadding=0 cellspacing=0 border="1">
<tr>
<td width="200" style="vertical-align:top;" align="center">
해피정닷컴
</td>
</tr>
</table>
</div>
</body>
</html>
어느곳에 코드를 삽입하여도 원하는 위치에 스크롤 배너가 보이도록 변경하였습니다.
이용팁 : 이 내용을 적용시킬 HTML문서에 직접 추가해서 사용할수 있으나. 이 경우 배너를 추가하거나 수정할때 모든 페이지를 수정해야하는 문제가 발생합니다.
이때 이 파일을 별도 생성시킨후, 적용시킬 HTML에서 include 로서 적용시킨다면 무척 편리하게 관리가 될것입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="Javascript" type="text/Javascript">
<!--
// 스크롤 배너 스크립트 시작
var scroll_time = 300;
function set_move_banner() {
window.setTimeout( "set_move_banner()", scroll_time );
top_x = 0;
top_y = document.body.scrollTop;
// scroll_banner_1 : 1번째 스크롤 배너
if( typeof( document.all.scroll_banner_1 ) == "object" ) {
is_banner_1 = true;
}
// scroll_banner_2 : 2번째 스크롤 배너
if( typeof( document.all.scroll_banner_2 ) == "object" ) {
is_banner_2 = true;
}
move_banner();
// scroll_banner_1 : 1번째 스크롤 배너
if( is_banner_1 ) {
document.all.scroll_banner_1.style.marginTop = top_y;
}
// scroll_banner_2 : 2번째 스크롤 배너
if( is_banner_2 ) {
document.all.scroll_banner_2.style.marginTop = top_y;
}
}
function move_banner() {
}
function move_banner_js_init() {
set_move_banner();
}
move_banner_js_init()
// 스크롤 배너 스크립트 끝
//-->
</script>
<style type="text/css">
<!--
#scroll_banner_1 {
position:absolute;
left:100px;
top:50px;
width:70px;
height:116px;
z-index:1;
visibility: visible;
}
#scroll_banner_2 {
position:absolute;
left:200px;
top:150px;
width:70px;
height:116px;
z-index:1;
visibility: visible;
}
-->
</style>
</head>
<body>
<div id="scroll_banner_1">
<table cellpadding=0 cellspacing=0 border="1">
<tr>
<td width="200" style="vertical-align:top;" align="center">
Happyjung.com
</td>
</tr>
</table>
</div>
<div id="scroll_banner_2">
<table cellpadding=0 cellspacing=0 border="1">
<tr>
<td width="200" style="vertical-align:top;" align="center">
해피정닷컴
</td>
</tr>
</table>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.