웹마스터 팁
이미지 줌 아웃슬라이드
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>
<!--여기까지 복사 이용하세요-->
댓글 4
제목 | 글쓴이 | 날짜 |
---|---|---|
도와 주세요!!! 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에서 마이카페 목록을 셀렉트 박스로 바꾸기
![]() | 늘푸른이 | 2011.05.07 |
윈도즈에서의 Apahch 설치법 [88] | zero | 2000.03.06 |
Include 변수 담기 | 니오티 | 2011.05.03 |
관리자페이지 회원목록을 일반페이지에서 사용하기(수정)
[4]
![]() | 늘푸른이 | 2011.04.27 |
nginx 에서 XE rewrite 모듈 설정하기
[1]
![]() | 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]
![]() | 세라오빠 | 2011.03.01 |
모듈 선택기에서 선택이 안되는 문제해결. | 모글리만세 | 2011.04.22 |
QRCode 이미지를 줄여서 깔끔하게사용하는 법~ [2] | 포토올/wow | 2011.04.18 |