쇼핑몰에서 많이 사용되고 있는 날개배너입니다. 배너 안에 상품을 위/아래로 클릭 롤링시킬 수 있도록 했습니다.
(아래 소스는 제가 작업중에 사용한 그대로입니다. 사용하실 분들은 많이 손을 보셔야 할지도 모르겠습니다^^)
HTML
<body onload="InitializeStaticMenu();">
<div id="STATICMENU" style="position: absolute; z-index: 100; width: 85px; height: 494px; ">
<!-- 날개 -->
<table cellspacing="0" style="width: 85px; background: url('/img/reservation/bg_wing_mid.gif') repeat-y">
<tr>
<td><img src="/img/reservation/bg_wing_top.gif" width="85" height="36" alt="" /></td>
</tr>
<tr>
<td class="vt ac" style="height: 22px"><a href="javascript:today_prev_model()"><img src="/img/reservation/bt_wing_top.gif" width="48" height="10" alt="" /></a></td>
</tr>
<tr>
<td>
<!-- Item List (Hidden) -->
<div id="hidden_item_0" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI0</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_1" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI1</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_2" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI2</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_3" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI3</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_4" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI4</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_5" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI5</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_6" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI6</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<div id="hidden_item_7" style="display: none;">
<table cellspacing="3" style="width: 60px; margin: 0 auto">
<tr>
<td colspan="2" class="imgBox ac"><a href=""><img src="/img/reservation/img_main_temp_04.gif" width="58" height="46" alt="" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="" class="emp">GGI7</a></td>
</tr>
<tr>
<td style="word-spacing: -3px; line-height: 150%"><img src="/img/common/ic_cate_pension.gif" width="24" height="12" alt="" align="absmiddle" /> 가평군 상면 행현리</td>
</tr>
</table>
</div>
<!-- //Item List (Hidden) -->
<script type="text/javascript">
<!--
// 위에 감춰져 있는 Item List 를 가져와서 배열에 담아둠
today_model_html[0] = document.getElementById("hidden_item_0").innerHTML;
today_model_html[1] = document.getElementById("hidden_item_1").innerHTML;
today_model_html[2] = document.getElementById("hidden_item_2").innerHTML;
today_model_html[3] = document.getElementById("hidden_item_3").innerHTML;
today_model_html[4] = document.getElementById("hidden_item_4").innerHTML;
today_model_html[5] = document.getElementById("hidden_item_5").innerHTML;
today_model_html[6] = document.getElementById("hidden_item_6").innerHTML;
today_model_html[7] = document.getElementById("hidden_item_7").innerHTML;
// 아래 미리 준비된 레이어 안에 임의의 3개를 삽입
//-->
</script>
<div id="today_model_0">
<script type="text/javascript">document.write(today_model_html[2]);</script>
</div>
<div id="today_model_1">
<script type="text/javascript">document.write(today_model_html[3]);</script>
</div>
<div id="today_model_2">
<script type="text/javascript">document.write(today_model_html[4]);</script>
</div>
<div id="today_model_3">
<script type="text/javascript">document.write(today_model_html[5]);</script>
</div>
</td>
</tr>
<tr>
<td class="vb ac" style="height: 22px"><a href="javascript:today_next_model()"><img src="/img/reservation/bt_wing_bottom.gif" width="48" height="10" alt="" /></a></td>
</tr>
<tr>
<td><img src="/img/reservation/bg_wing_bottom.gif" width="85" height="10" alt="" /></td>
</tr>
</table>
<!-- //날개 -->
</div>
JavaScript
// 우측 날개 스크롤 시작
var stmnRIGHT = -100; // 오른쪽 여백 (메뉴가 오른쪽에서 지정된 음수값 픽셀만큼 떨어진 곳에 보여집니다)
var stmnGAP1 = 0; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP2 = -300; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 0; // 스크롤 시작위치
var stmnActivateSpeed = 20;
var stmnScrollSpeed = 100;
var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint;
stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if (stmnStartPoint != stmnEndPoint) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
}
function InitializeStaticMenu() {
document.getElementById('STATICMENU').style.right = stmnRIGHT + 'px';
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
RefreshStaticMenu();
}
// 우측 날개 스크롤 끝
// 날개 상품 보기 스크립트
var today_model_html = new Array();
today_prev_count = 2;
today_next_count = 2;
function today_prev_model() { // 날개 이전 상품 보기
if (today_prev_count == 0){
//alert('이전상품이 없습니다.');
return;
} else {
start = today_prev_count - 1;
for(i=0,j=start;i<4;i++,j++) {
today_model = document.getElementById('today_model_'+i);
today_model.innerHTML = today_model_html[j];
}
this.today_prev_count = today_prev_count - 1;
this.today_next_count = today_next_count + 1;
}
return;
}
function today_next_model() { // 날개 다음 상품 보기
if (today_next_count <= 0 ) {
//alert('다음상품이 없습니다.');
return;
} else {
start = today_prev_count + 1;
for(i=0,j=start;i<4;i++,j++) {
today_model = document.getElementById('today_model_'+i);
today_model.innerHTML = today_model_html[j];
}
this.today_prev_count = today_prev_count + 1;
this.today_next_count = today_next_count - 1;
}
return;
}
이 글은 스프링노트에서 작성되었습니다.
댓글 없음:
댓글 쓰기