웹마스터 팁
이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음)
2002.04.25 17:03
윤미님께서 올리신
물결 효과 슬라이드와 페이드 효과를 섞어서
이미지 오버랩을 만들어 봤습니다.
http://neogene.new21.org/_etc/overlap.html <-예제보기
<body> 와 </body>사이에 아래 스크립트를 추가하세요.
(오류 모두 수정되었습니다)
<script language = "JavaScript">
<!--
// 이미지의 위치
var imgPosX = 10;
var imgPosY = 10;
// 시간 간격 (멈춰있는 초)
var pause = 3;
// 오버랩 빠르기 (클수록 빠름 - 100을 나누어 떨어질 수 있는 수가 좋음)
var multi = 4;
// 이미지 주소 (imgName1과 imgName2를 교대로 하고, 배열 첨자는 두번씩 씀)
var imgName1 = new Array();
var imgName2 = new Array();
imgName1[0] = "images/intro1.jpg";
imgName2[0] = "images/intro2.jpg";
imgName1[1] = "images/intro3.jpg";
imgName2[1] = "images/intro4.jpg";
imgName1[2] = "images/intro5.jpg";
imgName2[2] = "images/intro6.jpg";
imgName1[3] = "images/intro7.jpg";
imgName2[3] = "images/intro8.jpg"; // 홀수 개일 경우 마지막 그림을 빈 그림으로 해서 짝수개로 맞춰주세요.
var imgPreload1 = new Array();
for (i = 0; i < imgName1.length; i++) {
imgPreload1[i] = new Image();
imgPreload1[i].src = imgName1[i];
}
var imgPreload2 = new Array();
for (i = 0; i < imgName2.length; i++) {
imgPreload2[i] = new Image();
imgPreload2[i].src = imgName2[i];
}
var imgIndex1 = 0;
var imgIndex2 = imgName2.length - 1;
var step = 0;
var maxStep = 100 / multi;
function overlapStart()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
var timer = setTimeout("overlapStart()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function overlap1to2()
{
if (step-- >= 0) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap1to2()", 0);
}
else {
clearTimeout(timer);
changeImage1();
var timer = setTimeout("overlap2to1()", pause);
}
}
function overlap2to1()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap2to1()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function changeImage1()
{
imgIndex1++;
if (imgIndex1 >= imgName1.length) {
imgIndex1 = 0;
}
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
}
function changeImage2()
{
imgIndex2++;
if (imgIndex2 >= imgName2.length) {
imgIndex2 = 0;
}
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
}
function overlapImage()
{
pause = pause * 1000;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
overlap1.style.posTop = overlap2.style.posTop = imgPosY;
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
overlapStart();
}
document.write('<div id="overlap1" style="position:absolute; filter:alpha(opacity=0);"></div>');
document.write('<div id="overlap2" style="position:absolute; filter:alpha(opacity=0);"></div>');
window.onload = overlapImage;
-->
</script>
새로 만드는 홈페이지에 쓸려고 여기저기 찾았는데...
어째 있을만한 팁이 없길래...
두어시간 코딩(사실 거의 고치기만 한 거죠..ㅋㅋ)해서 만들었습니다.
유용하게 쓰세욤.ㅋㅋ
물결 효과 슬라이드와 페이드 효과를 섞어서
이미지 오버랩을 만들어 봤습니다.
http://neogene.new21.org/_etc/overlap.html <-예제보기
<body> 와 </body>사이에 아래 스크립트를 추가하세요.
(오류 모두 수정되었습니다)
<script language = "JavaScript">
<!--
// 이미지의 위치
var imgPosX = 10;
var imgPosY = 10;
// 시간 간격 (멈춰있는 초)
var pause = 3;
// 오버랩 빠르기 (클수록 빠름 - 100을 나누어 떨어질 수 있는 수가 좋음)
var multi = 4;
// 이미지 주소 (imgName1과 imgName2를 교대로 하고, 배열 첨자는 두번씩 씀)
var imgName1 = new Array();
var imgName2 = new Array();
imgName1[0] = "images/intro1.jpg";
imgName2[0] = "images/intro2.jpg";
imgName1[1] = "images/intro3.jpg";
imgName2[1] = "images/intro4.jpg";
imgName1[2] = "images/intro5.jpg";
imgName2[2] = "images/intro6.jpg";
imgName1[3] = "images/intro7.jpg";
imgName2[3] = "images/intro8.jpg"; // 홀수 개일 경우 마지막 그림을 빈 그림으로 해서 짝수개로 맞춰주세요.
var imgPreload1 = new Array();
for (i = 0; i < imgName1.length; i++) {
imgPreload1[i] = new Image();
imgPreload1[i].src = imgName1[i];
}
var imgPreload2 = new Array();
for (i = 0; i < imgName2.length; i++) {
imgPreload2[i] = new Image();
imgPreload2[i].src = imgName2[i];
}
var imgIndex1 = 0;
var imgIndex2 = imgName2.length - 1;
var step = 0;
var maxStep = 100 / multi;
function overlapStart()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
var timer = setTimeout("overlapStart()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function overlap1to2()
{
if (step-- >= 0) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap1to2()", 0);
}
else {
clearTimeout(timer);
changeImage1();
var timer = setTimeout("overlap2to1()", pause);
}
}
function overlap2to1()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap2to1()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function changeImage1()
{
imgIndex1++;
if (imgIndex1 >= imgName1.length) {
imgIndex1 = 0;
}
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
}
function changeImage2()
{
imgIndex2++;
if (imgIndex2 >= imgName2.length) {
imgIndex2 = 0;
}
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
}
function overlapImage()
{
pause = pause * 1000;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
overlap1.style.posTop = overlap2.style.posTop = imgPosY;
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
overlapStart();
}
document.write('<div id="overlap1" style="position:absolute; filter:alpha(opacity=0);"></div>');
document.write('<div id="overlap2" style="position:absolute; filter:alpha(opacity=0);"></div>');
window.onload = overlapImage;
-->
</script>
새로 만드는 홈페이지에 쓸려고 여기저기 찾았는데...
어째 있을만한 팁이 없길래...
두어시간 코딩(사실 거의 고치기만 한 거죠..ㅋㅋ)해서 만들었습니다.
유용하게 쓰세욤.ㅋㅋ
댓글 8
-
엔카일
2002.04.25 17:16
-
이승재
2002.04.25 17:30
저 역시 XP IE6.0 사용중인데 페이지 오류가 뜹니다..
124 줄 window.onload = overlapImage(); -
조해성
2002.04.25 17:53
아앗... 실수했군요... 고쳤습니당... ^^ 감사감사... -
Legend
2002.04.25 17:53
overlapImage()는 함수가 리턴하는 함수값을 나타내므로 여기서 윈도우에서 발생하는 onload이벤트를 처리하는 것은 함수값이 아니라 함수 자체이기 때문에 window.onload=overlapImage(); 잘못된 것입니다.
window.onload = overlapImage; 이렇게 되어야 이벤트 처리를 함수로 지정하는 것이지요.
window.onload=overlapImage();해도 실행은 되지만 오류가 나는 이유는 일단 함수를 실행하지만 함수값이
이벤트핸들러의 값이 될수없기때문에 실행은 되지만 오류표시가 나지요 -
Snow
2002.04.29 15:35
Good~~
Drum <- Yamaha ^^
XP korean write bug T.T -
정진환
2003.02.15 18:56
역시 우리나라 인터넷 만큼 방대한 자료는 타국엔 없는것인가 --ㅋㅋㅋㅋㅋ
오메 뿌듯한거... -
최지연
2003.12.01 13:50
자료정말감사합니당...
제 친구가 소스좀 구해달라고 난리를 쳐서 힘들었는데...ㅠㅠ -
만쓰별(정만)
2009.01.30 15:42
쩝.. 파이어폭스에서는 중간에 오류납니다. ^^;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 원하는시간에 팝업창을 띄우고 원하는 시간에 닫어뻐리는;; [2] | 키르(絶對) | 2002.06.13 |
| 부드럽게 스크롤바를 따라다니는..+_+ [6] | 키르(絶對) | 2002.06.13 |
| 플래쉬 효과나는 신비 메뉴 - -? *수정+카피라이터~ [17] | ▩윤미 | 2002.06.09 |
자바스크립트 이해하기...3
[1]
 | Eccen | 2002.06.05 |
| 서서히 이미지를 변경시켜주는 환상적인 룰오버효과 [7] | ▩윤미 | 2002.05.31 |
|
마우스에 축구공 따라다니는 자바 스크립트..
[6]
| MR.HMH | 2002.05.30 |
| 어설픈 링크방지[정확한 경로로 오세요] [5] | 이성영 | 2002.05.30 |
|
자바스크립트 이해하기...2
[1]
| Eccen | 2002.05.30 |
|
자바스크립트 이해하기...1
[13]
| Eccen | 2002.05.26 |
| 폼안의 텍스트 입력시 실시간 카운팅 ? [8] | 카멜롯™ | 2002.05.20 |
| 링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..) [1] | ▩윤미 | 2002.05.19 |
| 글자가 커졌다가 작아졌다가.. [1] | Anice | 2002.05.17 |
| 텍스트박스안에서 춤추는글자 [1] | Anice | 2002.05.16 |
| 자바로 만든 퍼즐 겜^^; [8] | ☆봄비ㆀ | 2002.05.11 |
| 타이틀바 도, 움직인다! 캬하! (상태바 아님) [10] | ▩윤미 | 2002.05.06 |
| 웹브라우저, 언어, 운영체제 보여주기.. [3] | 이동기 | 2002.04.29 |
| 이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음) [8] | 조해성 | 2002.04.25 |
| 자바스크립트 실행시점 | Jacylee | 2002.04.11 |
| 배너 링크를 바로 클립보드로 카피하기(Legend님꺼 보충) [3] | 카멜롯™ | 2002.04.04 |
| 조그만한창 열기. ^.^ [5] | 아이쿠 | 2002.04.02 |
라고 나오네요.. 동작은 잘됩니다;