웹마스터 팁
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
-
백록담괴물
2004.06.14 22:41
이미지는 어디에 있나욤???이미쥐?? -
화진
2004.06.12 21:42
이미지는 어디에 넣나요...
이미지 이름이 없는데... -
RedEye(kaist)
2004.07.21 15:16
<div id="poto" style="position:absolute;width:800;height:130;left:0;top:0;">
160 X 130 사이즈 이미지 5개 <img src="" width="160" height="130" alt=""> x 5
<div>
제목 | 글쓴이 | 날짜 |
---|---|---|
{주목} CodeRed 아파치로그파일 지우기 [2] | skyel | 2001.08.22 |
MySQL 관리 첫걸음 [5] | 앤디(andy) | 2001.04.18 |
APC(Alternativ PHP Cache) 사용법( php 캐쉬 플러그인 ) [1] | 김도한 | 2002.01.29 |
아파치 웹서버 속도 빠르게 하기 위한 최적화 팁 [14] | 차카게살자 | 2002.01.27 |
[APM자동설치] APM_Setup 3 ( Apache, PHP4, MySQL, Perl, Tomcat ) [6] | 근땅e | 2002.02.06 |
커널 버전 알아내기 [1] | 오픈소스 | 2002.02.21 |
vi 편집기 사용시 비프음 제어 | 오픈소스 | 2002.02.21 |
에러페이지를 서버관리자가 지정한 페이지로. [1] | teenteenv | 2002.02.21 |
[리눅스]proftp 에서 사용자가 상위 폴더로 이동을 못하게... [3] | teenteenv | 2002.02.22 |
[강좌1탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] | RealComty | 2002.02.23 |
[강좌2탄]와우리눅스7.0을 서버로 두고 인터넷공유 [1] | RealComty | 2002.02.23 |
[강좌3탄]와우리눅스7.0을 서버로 두고 인터넷공유 [4] | RealComty | 2002.02.23 |
[re] [강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] | 주영명 | 2002.02.27 |
[강좌4탄]와우리눅스7.0을 서버로 두고 인터넷공유 [2] | RealComty | 2002.02.23 |
[강좌끝이다~!]와우리눅스7.0을 서버로 두고 인터넷공유 [8] | RealComty | 2002.02.23 |
메모리 절약하기 - 리눅스 | 오픈소스 | 2002.02.24 |
wuftp에서 proftp로...그리고, proftp 설정하기 [1] | 쇠물택 | 2002.02.24 |
[sapzils서버세팅] A+P+M 소스 설치 [4] | 쇠물택 | 2002.02.24 |
텔넷 사용자 관리... | 쇠물택 | 2002.02.24 |
리눅스 시스템에서 시간 맞추기 [2] | 쇠물택 | 2002.02.24 |