웹마스터 팁

  2. Support
  3. 웹마스터 팁

이미지 줌 아웃슬라이드

2008.02.10 00:18

맨발



혹시 필요하신분이 있을까봐 올림니다 사진불러오기는 그만이네요

적용된 곳 --      http://pmh219.webkebi.co.kr/zbxe.html

우선메모장을 열어파일을 하나만들어 자신에 계정에 올립니다(파일)( 이름.html)
 
그런다음 에디터로 메모장을 열어서 아래소스을 복사해넣읍니다

그리고 밑에 아이 프레임으로 불러와 적당한곳에 넣어주시면 됩니다

<iframe style="border:8px double #CCCCCC" frameborder="no" width=230 height=135
scrolling=no src="주소"></iframe>

<!--여기서 부터 소스 시작입니다-->
<html>
<HEAD>
<title>이미지 줌아웃슬라이드</title>   
</HEAD>
<BODY BGCOLOR="#000000"> 


<script type="text/javascript">
<!--


// 아래와 같은 순서로 이미지주소를 넣어주세요
pics=new Array()
pics[0]="pics[2]="http://pmh219.webkebi.co.kr/img1/3.jpg"
pics[1]=""
pics[2]=""
pics[3]=""
pics[4]=""

// 얼마든지 추가가능합니다

pause=3  // 이미지교체 타이밍(단위:초)
step= 6  // 이미지교체 프레임

// 이하 수정할 부분 없슴.....!
function initslide(){
document.getElementById("pic_one").width=1
document.getElementById("pic_two").width=240 // 이미지세로크기조절가능
p1x=parseInt(document.getElementById("pic_one").style.left)
p1w=document.getElementById("pic_one").width
p2w=document.getElementById("pic_two").width
document.getElementById("pic_one").src=pics[1]
document.getElementById("pic_two").src=pics[0]
posx=p1x
w1=0
w2=p2w
num=0
picnum=2
animate()
}

function animate(){
if(picnum>pics.length-1){picnum=0}
posx+=step
w1+=step
w2-=step

timer=setTimeout("animate()",50)
if(num==0){
document.getElementById("pic_one").style.width=w1
document.getElementById("pic_two").style.width=w2
document.getElementById("pic_two").style.left=posx

if(w2<step){
document.getElementById("pic_two").style.left=p1x
document.getElementById("pic_two").style.width=p1w
document.getElementById("pic_two").src=pics[picnum++]
posx=p1x
w1=0
w2=p2w
num=1
clearTimeout(timer)
setTimeout("animate()",pause*1000)

}

}

if(num==1){
document.getElementById("pic_two").style.width=w1
document.getElementById("pic_one").style.width=w2
document.getElementById("pic_one").style.left=posx

if(w2<step){
document.getElementById("pic_one").style.left=p1x
document.getElementById("pic_one").style.width=p1w
document.getElementById("pic_one").src=pics[picnum++]
posx=p1x
w1=0
w2=p2w
num=0
clearTimeout(timer)
setTimeout("animate()",pause*1000)
}

}
}
//-->
</script>

<BODY onload="initslide()">


<img src="1번이미지폴더주소" id="pic_one" alt="1" style="position:absolute; left:0px; top:0px; z-index:1">
<img src="2번이미지폴더주소" id="pic_two" alt="2" style="position:absolute; left:0px; top:0px; z-index:1">


</body>
</html>


<!--여기까지 복사 이용하세요-->

이 게시물을
Profile
좋아요
목록
제목 글쓴이 날짜
도와 주세요!!! Explorer 6에서는 제대로 보이는데 Explorer 7 이상에서는 사진이 안보여요 [2] 이영규616 2011.05.12
페이지수정이 안될때 [2] gob4deng2 2011.04.30
서버이전후 캐시파일 재생성 안되시는분들 [2] 우냠냠 2011.05.11
미궁속의 문제점 해결법(2가지) [2] 박용식 2010.11.21
회원 관리자 두기.. DaKi 2011.05.09
CafeXE에서 마이카페 목록을 셀렉트 박스로 바꾸기 file 늘푸른이 2011.05.07
윈도즈에서의 Apahch 설치법 [88] zero 2000.03.06
Include 변수 담기 니오티 2011.05.03
관리자페이지 회원목록을 일반페이지에서 사용하기(수정) [4] file 늘푸른이 2011.04.27
nginx 에서 XE rewrite 모듈 설정하기 [1] file ezi 2011.05.01
제로보드에 네이버 실시간 뉴스 넣을 수 있나요? 서현보 2011.04.29
페이스북 정통 '소셜댓글'이나 'send' 버튼 적용 애드온 제작 부탁드려요! hellosamyoo 2011.04.29
eAccelerator와의 호환성 문제 [2] 7시내고향 2011.04.22
이미지 줌 아웃슬라이드 [4] 맨발 2008.02.10
1.4.5 업데이트후 로그인 안되시는 분들 [3] BlogJh 2011.04.03
이유는 모르겠는데 뷰테이블을 쓰면 XE의 속도가 크게 떨어지는 것 같습니다. [2] 철갑 2011.04.25
XE 홈피에 예쁜 음악BGM 넣는 방법(프레임 분리형 플래시BGM) 푸른커튼2 2011.04.18
XE Lune_Board 의 코멘트 배경색상 수정하기 [5] file 세라오빠 2011.03.01
모듈 선택기에서 선택이 안되는 문제해결. 모글리만세 2011.04.22
QRCode 이미지를 줄여서 깔끔하게사용하는 법~ [2] 포토올/wow 2011.04.18
태그 쓰기