-----------------------------------------------------------------------------
<div id="quick" style="position:absolute; top:500px; left:900px;>
<table cellpadding="0" cellspacing="0">
<tr>
<td> 퀵메뉴 내용(이미지 및 플래시등등..) </td>
</tr>
</table>
</div>
또는
<div id="quick" style="position:absolute; top:500px; left:900px;>
<div style="position:absolute;">
퀵메뉴 내용(이미지 및 플래시등등..)
</div>
</div>
-----------------------------------------------------------------------------
위의 두 소스중에서..
<div id="quick" style="position:absolute; top:500px; left:900px;>
위의 소스처럼 이안에 table 또는 div 등등..을 이용하여 퀵메뉴 내용을 입력하셔야 합니다.
단순히 링크태그, 이미지태그, 텍스트등등.. 입력하면 아무것도 출력되지 않거나 출력되어도 링크가 안걸리거나 제대로 구현되지 않을 수 있습니다.
</div>
id="quick" 아래의 스크립트적용
left:900px 좌측으로 부터의 위치입니다.
top:500px 이것을 넣으면 처음 진입시 슬라이딩 되면서 퀵메뉴가 출력됩니다.
- 현재처럼 top:500px으로 입력하면 하단에서 상단으로 슬라이딩되면서 퀵메뉴가 처음 출력되며..
top:-500px 이렇게 입력하면 반대로 상단에서 하단으로 슬라이딩되면서 퀵메뉴가 처음 출력됩니다.
즉, 숫자가 커질수록 하단에서 상단으로.. 숫자가 작을수록 상단에서 하단으로 슬라이딩 되면서 출력됩니다.
위의 소스중 한가지 소스를 입력하고 바로 하단에 아래의 스크립트를 입력합니다.
주의- <head></head>사이에 넣지않고 위의 소스 아래에 바로 입력합니다.
head 사이에 넣거나 위의 소스보다 위에 넣는다면 퀵메뉴가 정상구현되지 않습니다.
<script language="javascript">
<!--
var scroll_pixel,div_pixel,gtpos,gbpos,loop,moving_spd;
var top_margin = 80; /// 창의 맨위와의 여백 내려올때
var top_margin2 = 80; /// 창의 맨위와의 여백 올라올때
var speed = 3; /// 점차 줄어드는 속도를 위한 설정
var speed2 = 0; /// setTimeout을 위한 속도 설정
var moving_stat = 1; /// 메뉴의 스크롤을 로딩시 on/off설정 1=움직임 0은 멈춤
function check_scrollmove()
{
scroll_pixel = document.body.scrollTop;
gtpos = document.body.scrollTop+top_margin;
gbpos = document.body.scrollTop+top_margin2;
if(quick.style.pixelTop < gtpos)
{
moving_spd = (gbpos-quick.style.pixelTop)/speed;
quick.style.pixelTop += moving_spd;
}
if(quick.style.pixelTop > gtpos)
{
moving_spd = (quick.style.pixelTop-gtpos)/speed;
quick.style.pixelTop -= moving_spd;
}
loop = setTimeout("check_scrollmove()",speed2);
}
function moving_control()
{
if(!moving_stat){ check_scrollmove(); moving_stat = 1;}
else{ clearTimeout(loop); moving_stat = 0; quick.style.pixelTop = top_margin;}
}
check_scrollmove();
-->
</script>
위의 스크립트중에서..
var top_margin = 80; /// 창의 맨위와의 여백 내려올때
var top_margin2 = 80; /// 창의 맨위와의 여백 올라올때
이 부분을 수정하여 상단과의 위치를 맞춰주시면 됩니다.
동일한 숫자를 입력하여야 스크롤을 움직여도 동일한 위치에 있게 됩니다.
0 으로 입력하면 최상단에 위치되며 숫자가 커질수록 아래쪽으로 내려갑니다.
'etc.' 카테고리의 다른 글
| 이동가능한 레이어팝업, 오늘 하루 이 창을 열지 않음 (0) | 2014.01.16 |
|---|---|
| 버튼클릭시 열리는 레이어팝업, 이동가능한 레이어 (0) | 2014.01.16 |
| swf 플래시 테두리 없이 삽입 , 플래시 삽입태그 (0) | 2014.01.16 |
| body 마우스 오른쪽버튼 사용금지 태그 (0) | 2014.01.16 |
| js 및 css 불러오기 (0) | 2014.01.16 |