웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
throttle-me를 이용한 계정 트래픽 나타내기 [39] | 旻天 | 2003.11.27 |
제로보드회원의 포인트 랭킹 체크하기 sql 정리 [4] | 한꼬마 | 2003.11.26 |
한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
[Lotto 6/45] 로또 추첨 구현하기~ [5] | 전원주 | 2003.11.21 |
한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
회원 포인트 랭킹(중복 -_-a) [4] | weky | 2003.11.15 |
제로보드회원의 포인트 랭킹 체크하기 [13] | 전원주 | 2003.11.15 |
지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
접속자의 IP를 화일로 저장(기능추가) [27] | 전원주 | 2003.11.06 |
호스팅업체에서 GD를 지원하는지 여부를 알 수 있게해주는 소스 [12] | Wizard | 2003.11.05 |
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음) [10] | 9000㎒ | 2003.11.01 |
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
신문기사 긁어오기 [28] | horizon | 2003.10.20 |
공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
최신인기가요 순위 한방에 뽑아오기 [10] | 제누스 | 2003.10.16 |
알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
MSN Messenger Class - | HungryMania | 2003.10.10 |
공지사항|일기장 3장 write_ok.php //간단한 입력쿼리문//수정 [5] | 시루바 | 2003.10.08 |
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다 [21] | 버찌소년 | 2003.10.08 |
공지사항|일기장 프로그램 2장:코딩구조와write.php [2] | 시루바 | 2003.10.02 |