웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
왔다 갔다 이미지 스크롤
2004.05.25 16:08
이미지가 움직이다가 멈추고 다시 움직입니다.
인터넷에 공개된 소스들은 많이 복잡하고 길더군요.. 그래서 줄여봤습니다..
<!-- 이미지 출력부분 -->
<div style="position:relative;width:162;height:132;border:1px solid #000000;" >
<div style="position:absolute;width:160;height:130;left:0;top:0;clip:rect(0 160 130 0)" onmouseover="poto_stop()" onmouseout="poto_move()">
<div id="poto" style="position:absolute;width:800;height:130;left:0;top:0;">
160 X 130 사이즈 이미지 5개
<div>
</div>
</div>
<script>
// 좌우로 왔다갔다 해주게 하는 변수
i=-1;
// 처음 정지시간 5초
delay=5000;
// 움직이는 함수를 실행
poto_move();
// 움직임 함수
function poto_move(){
// 좌측 또는 우측으로 1픽셀씩 이동시킴
poto.style.pixelLeft += i;
// 맨 좌즉 또는 우측에 도달했을 때 반대 방향으로 전환시킴
if(poto.style.pixelLeft == -640 || poto.style.pixelLeft == 0) i *= -1;
// 만약 사진 한장 사이즈가 되면 5초동안 멈춘다. 사진을 보여주기 위해
if(!(poto.style.pixelLeft % 160)) delay=5000;
// 정해진 시간마다 poto_move() 함수를 자동 실행한다.
t1=setTimeout("poto_move()",delay);
// 기본적으로 이동되는 시간을 50/1000으로 한다. 이미지가 스르르 움직인다.
delay=50;
}
function poto_stop(){
// 자동 실행 함수를 멈춥니다.
clearTimeout(t1);
}
</script>
인터넷에 공개된 소스들은 많이 복잡하고 길더군요.. 그래서 줄여봤습니다..
<!-- 이미지 출력부분 -->
<div style="position:relative;width:162;height:132;border:1px solid #000000;" >
<div style="position:absolute;width:160;height:130;left:0;top:0;clip:rect(0 160 130 0)" onmouseover="poto_stop()" onmouseout="poto_move()">
<div id="poto" style="position:absolute;width:800;height:130;left:0;top:0;">
160 X 130 사이즈 이미지 5개
<div>
</div>
</div>
<script>
// 좌우로 왔다갔다 해주게 하는 변수
i=-1;
// 처음 정지시간 5초
delay=5000;
// 움직이는 함수를 실행
poto_move();
// 움직임 함수
function poto_move(){
// 좌측 또는 우측으로 1픽셀씩 이동시킴
poto.style.pixelLeft += i;
// 맨 좌즉 또는 우측에 도달했을 때 반대 방향으로 전환시킴
if(poto.style.pixelLeft == -640 || poto.style.pixelLeft == 0) i *= -1;
// 만약 사진 한장 사이즈가 되면 5초동안 멈춘다. 사진을 보여주기 위해
if(!(poto.style.pixelLeft % 160)) delay=5000;
// 정해진 시간마다 poto_move() 함수를 자동 실행한다.
t1=setTimeout("poto_move()",delay);
// 기본적으로 이동되는 시간을 50/1000으로 한다. 이미지가 스르르 움직인다.
delay=50;
}
function poto_stop(){
// 자동 실행 함수를 멈춥니다.
clearTimeout(t1);
}
</script>
댓글 3
제목 | 글쓴이 | 날짜 |
---|---|---|
로딩 100% 후 페이지 이동시키기 [1] | ▩윤미 | 2004.04.30 |
웹페이지에 테두리 두르기 [5] | ▩윤미 | 2004.04.30 |
그림파일없이 바꾸는 그라이데이션 배경색 [3] | ▩윤미 | 2004.04.30 |
접속할때마다 다른 이미지 띄우기 [8] | ▩윤미 | 2004.04.30 |
특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결 [8] | 검미르 | 2004.05.03 |
상태창에 머문시간 보여주기 [5] | ☺심심 | 2004.05.05 |
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
이미지 갤러리-이미지에 설명이나 이름을 같이 달아줄수 있는.. | webzang | 2004.05.17 |
배너를 모자이크로 슬라이드한다! [13] | ☺심심 | 2004.05.17 |
동영상을 일반 버튼으로 제어 | ☺심심 | 2004.05.23 |
왔다 갔다 이미지 스크롤 [3] | 컴도미 | 2004.05.25 |
간단한 감추기/펼치기 스크립트 (태터툴즈의 more 기능) [5] | 나이시스 | 2004.05.28 |
지바 애플 아날로그 시계 소스입니다... [4] | 한성민 | 2004.06.02 |
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
[추천] 가로형 배너 슬라이드 [7] | ⓣinⓣin™ | 2004.06.10 |
볼륨값이 얼마나 될까? [5] | PHASE | 2004.06.16 |
[추천] 세로형 배너 슬라이드 [4] | ⓣinⓣin™ | 2004.06.24 |
둥근테이블을 홈피에 짜고싶을때../ [12] | zEn | 2004.06.28 |
레이어 특강 1 - 큰일 나는 소스 [23] | 미친개 | 2004.06.30 |
레이어 2 - 뷁뷁뷁뷁뷁봵 [7] | 미친개 | 2004.07.04 |