웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
스크롤되는 레이어 나두 갖구 싶어서 ^^; 맹글어 봤습니다.
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
제목 | 글쓴이 | 날짜 |
---|---|---|
우리가 사랑한지 몇일째 날짜세주는 PHP 소스 [12] | 레드 | 2005.01.16 |
날짜 구하는 함수.. ... [3] | 김명현 | 2005.01.24 |
게시판 테이블 생성을 쉽게하자.
[2]
![]() | QQQ | 2005.01.29 |
내 컴퓨터가 표현할 수 있는 문자들. [6] | 최호성 | 2005.01.30 |
자바스크립트 단축키 지정을 쉽게하자. [1] | 권태수 | 2005.02.14 |
[날짜 구하는함수업]내일 날짜와 1년 후 년도 구하기 [8] | ssukai | 2005.02.24 |
사용자 등록/DB생성/테이블 생성
[3]
![]() | QQQ | 2005.03.03 |
ASC(순차), DESC(역순) 정렬하기. [4] | Xian | 2005.03.03 |
DB에서 각종 기념일을 내용,순서순으로 뽑아 정렬하기.. | 박순영 | 2005.03.17 |
[초보]아주쉬운 PHP로 그림에 글자 입히기
[11]
![]() | 김규백 | 2005.04.04 |
winamp 방송정보 읽어오기 심각한 문제해결
![]() | 이승원 | 2005.05.04 |
winamp 방송정보 알아오기 (2005년 새로 코딩한 버전)
[8]
![]() | 이승원 | 2005.05.06 |
나만의 미니홈 만들기 ㅡ password.php
[8]
![]() | 예뜨락 | 2005.05.07 |
나만의 미니홈 만들기 ㅡ 간단한 최근글 불러오기 [6] | 예뜨락 | 2005.05.09 |
나만의 미니홈 만들기 ㅡ 메모장 디자인 (html 소스) [4] | 예뜨락 | 2005.05.12 |
mysql 테이블 스키마 보는법. [2] | 최문혁 | 2005.05.14 |
나만의 미니홈 만들기 ㅡ 메모장 소스 | 예뜨락 | 2005.06.09 |
트랙백 기능 구현하기. | 태규 | 2005.06.12 |
대용량 파일 업로드 컴포넌트
[4]
![]() | OTLNO | 2005.06.15 |
효율적인 경로 지정하기 [9] | 대류 | 2005.07.27 |