웹마스터 팁
스크롤되는 레이어 나두 갖구 싶어서 ^^; 맹글어 봤습니다.
2003.05.28 01:25
아직 초보라 잘은 못만들지만..
그렇다고 기분상해들 하지마세요 ^^;;;;(초민망);
만들다 보니까 좀 이상한점이 있는데요 아래로 내려갈때와 위로 올라갈때의
창 맨위 와 여백을 다르게 줘야 비스무레하게 스더라구요..^^;;
글구 좀 알아보기 쉬우라고 지금 아래 쏘스는 pixel값이 input value로 나오게 해놨거든요
사용하실땐 살짝 편집을 하셔야 할듯하네요 ^^
암튼 다른분들보다는 좀 짧아서 그럭저럭 쓸만할까 해서 올려 봅니다.
예제는 몇일만..^^;;;
예) : http://goweb.netcci.org/scroll.html
<body>~</body>사이에 넣으시면 될듯해요~
------------------------------------------------------------
<!-- 이부분이 보여질 부분입니다...-->
<div id="div_id" style="position:absolute;left:300;">
<table border="1" height="300">
<tr>
<td>여기다 내용을 넣으세요</td>
</tr>
<tr>
<td align="center" style="cursor:hand" onclick="moving_control()">메뉴on/off</td>
</tr>
</table>
</div>
<!-- 여기까지-->
<script type="text/javascript" language="javascript">
<!--
var scroll_pixel,div_pixel,gtpos,gbpos,loop,moving_spd;
var top_margin = 50; /// 창의 맨위와의 여백 내려올때
var top_margin2 = 100; /// 창의 맨위와의 여백 올라올때
var speed = 20; /// 점차 줄어드는 속도를 위한 설정
var speed2 = 15; /// 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(div_id.style.pixelTop < gtpos)
{
moving_spd = (gbpos-div_id.style.pixelTop)/speed;
div_id.style.pixelTop += moving_spd;
}
if(div_id.style.pixelTop > gtpos)
{
moving_spd = (div_id.style.pixelTop-gtpos)/speed;
div_id.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; div_id.style.pixelTop = top_margin;}
}
check_scrollmove();
-->
</script>
----------------------------------
궂이 장점을 찾자면.. 소스가 좀 잛다는...-ㅁ-;
그럼 그만 쓸게요 부탁이니 야단은 처두 욕만은..-_-;;
즐암거나 하세요~~
그렇다고 기분상해들 하지마세요 ^^;;;;(초민망);
만들다 보니까 좀 이상한점이 있는데요 아래로 내려갈때와 위로 올라갈때의
창 맨위 와 여백을 다르게 줘야 비스무레하게 스더라구요..^^;;
글구 좀 알아보기 쉬우라고 지금 아래 쏘스는 pixel값이 input value로 나오게 해놨거든요
사용하실땐 살짝 편집을 하셔야 할듯하네요 ^^
암튼 다른분들보다는 좀 짧아서 그럭저럭 쓸만할까 해서 올려 봅니다.
예제는 몇일만..^^;;;
예) : http://goweb.netcci.org/scroll.html
<body>~</body>사이에 넣으시면 될듯해요~
------------------------------------------------------------
<!-- 이부분이 보여질 부분입니다...-->
<div id="div_id" style="position:absolute;left:300;">
<table border="1" height="300">
<tr>
<td>여기다 내용을 넣으세요</td>
</tr>
<tr>
<td align="center" style="cursor:hand" onclick="moving_control()">메뉴on/off</td>
</tr>
</table>
</div>
<!-- 여기까지-->
<script type="text/javascript" language="javascript">
<!--
var scroll_pixel,div_pixel,gtpos,gbpos,loop,moving_spd;
var top_margin = 50; /// 창의 맨위와의 여백 내려올때
var top_margin2 = 100; /// 창의 맨위와의 여백 올라올때
var speed = 20; /// 점차 줄어드는 속도를 위한 설정
var speed2 = 15; /// 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(div_id.style.pixelTop < gtpos)
{
moving_spd = (gbpos-div_id.style.pixelTop)/speed;
div_id.style.pixelTop += moving_spd;
}
if(div_id.style.pixelTop > gtpos)
{
moving_spd = (div_id.style.pixelTop-gtpos)/speed;
div_id.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; div_id.style.pixelTop = top_margin;}
}
check_scrollmove();
-->
</script>
----------------------------------
궂이 장점을 찾자면.. 소스가 좀 잛다는...-ㅁ-;
그럼 그만 쓸게요 부탁이니 야단은 처두 욕만은..-_-;;
즐암거나 하세요~~
댓글 10
-
조한웅
2003.05.28 09:22
-
Yun,s
2003.05.28 10:10
예제 주소 바꿨습니다.
어제까진 됬는데 왜 안될까.-_-;; -
조한웅
2003.05.28 14:40
부드럽게 잘 움직이는거 같네요... ^^
근데 움직이는 메뉴의 온/오프 기능은 없나요?! -
Yun,s
2003.05.28 16:26
리플달아주신 조한웅님께 너무나 감사하는맘에
on/off도 해봤습니다..^^;;; 잘될런지..ㅡㅡ;;
암튼 감사 -
쭘's
2003.05.28 17:44
좋으네요..^^:; -
Nas
2003.09.08 12:49
젤 깔끔해 보입니다.. 추천한방!! -
룰루♪
2003.09.22 16:48
제가 찾고 있었던 방법인디, 그 모시기.. 너무 위에까지 올라가는데
어떻게 할 수는 없나요 ㅠㅂ- -
Agape
2003.12.16 20:24
룰루님! 너무 위에 있을때는 top: 00 를 추가 하시면 되지않을까요?
<div id="div_id" style="position:absolute;left:300; top:200"> 이런식으로.. -
momo
2004.04.21 20:15
꼭 필요한 소스였는데 넘 ㄳㄳ -
한솔아빠
2004.09.23 23:39
감솨함다...눈이 아플 정도로 찾았느데..ㅋㅋ
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 리눅스 보안 : 기초적인 방화벽 : portsentry 설치하기 [2] | 정인배 | 2002.11.29 |
| cron을 이용한 자동 백업 받기 | 최종우 | 2002.12.02 |
| cron과 rsync 그리고 replication 을 이용한 데이터 백업 [3] | 최종우 | 2002.12.03 |
| FTP 를 이용한 원격 백업 받기 [5] | 최종우 | 2002.12.04 |
[계정삭제 스크립터] 편리님이 만드신 계정추가랑 연동됩니다.
[4]
 | 김동현 | 2002.12.04 |
| [FreeBSD] 자동으로 시간 맞추기.. [1] | DeX™ | 2002.12.04 |
| 계정 등록 스크립트 [8] | 편리 | 2002.12.05 |
| 오래간만에 찾아뵙는군요^^ [2] | Dopesoul | 2002.12.08 |
| Zend Optimizer Full Pass Setup [3] | DukeEYS | 2002.12.08 |
| mod_gzip 적용시 php 인클루드를 실패해서 포기하신분 보세요 [2] | DukeEYS | 2002.12.08 |
| apache2 + mod_jk 100번의 닭질 끝에 찾아가는 사이트 | DukeEYS | 2002.12.09 |
|
[FreeBSD] Proftp + MySQL 연동 설치하기
[2]
| DeX™ | 2002.12.09 |
| 레드햇(redhat)리눅스에서 rpm 관리 명령어 | 정인배 | 2002.12.09 |
| srpms, alpha, i386 , i686 이 의미하는 것은? [1] | Dopesoul | 2002.12.12 |
| 누군가 우리서버를 공격하고 있을때 응급처치! [13] | Dopesoul | 2002.12.13 |
| [re] 저의 최종의견 입니다. [5] | Dopesoul | 2002.12.17 |
| SetEnvIf 와 SetEnvIfNocase 의 차이 [7] | Dopesoul | 2002.12.13 |
| DeX 님의 시간 동기화 스크립트를 편하고 안정적으로 변경한 리눅스용! [4] | Dopesoul | 2002.12.13 |
| 리눅스 rpm 명령어 활용(1): MRTG 설치 | 정인배 | 2002.12.14 |
| PHP 4.2.3 파워 설치 테크닉 (에러 0%에 도전) [2] | 밍밍이 | 2002.12.17 |
확인 부탁드려용~ ^^