이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음)
페이지 정보
작성자 이름으로 검색 댓글 0건 조회 14,221회 작성일 06-08-02 19:54본문
이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음)
조해성 (Homepage) 2002-04-25 17:03:48, 조회 : 6,209, 추천 : 15
윤미님께서 올리신
물결 효과 슬라이드와 페이드 효과를 섞어서
이미지 오버랩을 만들어 봤습니다.
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>
새로 만드는 홈페이지에 쓸려고 여기저기 찾았는데...
어째 있을만한 팁이 없길래...
두어시간 코딩(사실 거의 고치기만 한 거죠..ㅋㅋ)해서 만들었습니다.
유용하게 쓰세욤.ㅋㅋ
[이 게시물은 human님에 의해 2007-05-14 17:58:49 bilkboard1에서 복사 됨]
[이 게시물은 human님에 의해 2007-05-15 09:09:28 bulk3에서 이동 됨]
조해성 (Homepage) 2002-04-25 17:03:48, 조회 : 6,209, 추천 : 15
윤미님께서 올리신
물결 효과 슬라이드와 페이드 효과를 섞어서
이미지 오버랩을 만들어 봤습니다.
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>
새로 만드는 홈페이지에 쓸려고 여기저기 찾았는데...
어째 있을만한 팁이 없길래...
두어시간 코딩(사실 거의 고치기만 한 거죠..ㅋㅋ)해서 만들었습니다.
유용하게 쓰세욤.ㅋㅋ
[이 게시물은 human님에 의해 2007-05-14 17:58:49 bilkboard1에서 복사 됨]
[이 게시물은 human님에 의해 2007-05-15 09:09:28 bulk3에서 이동 됨]
관련링크
댓글목록
등록된 댓글이 없습니다.