부드러운 이미지 체인징하기
1. <head>와 </head> 태그안 원하는 위치에 삽입하기
<script language="JavaScript">
<!--
var img1 = new Image();
img1.src = "표시할 그림1 경로";
var img2 = new Image();
img2.src = "표시할 그림2 경로";
var img3 = new Image();
img3.src = "표시할 그림3 경로";
//-->
</script>
2개만 할 꺼면 그림1과 그림2까지만 넣고 그림3 부분은 통째로
지우세요.
2. <body>태그 안에 onLoad="init()" 를 추가합니다.
<body onLoad="init()">
3. <body>와 </body>태그 사이의 아무곳에나 아래 소스를 넣습니다.
<script language="JavaScript">
<!--
var maxLoops = 3; // 그림2개만 할 꺼면 2로 바꾸세요
var bInterval = 2; // 전환시 잠깐 멈춰있는 시간수치입니다
var count = 2;
function init() {
blendtrjs.filters.blendTrans.apply();
document.images.blendtrjs.src = eval("img"+count+".src");
blendtrjs.filters.blendTrans.play();
if (count < maxLoops) {
count++;
}
else {
count = 1;
}
setTimeout("init()", bInterval*700+2000);
}
//-->
</script>
var maxLoops = 3; 에서 3은 이미지의 개수입니다. 2개면 2로 바꾸세요.
var bInterval = 2; 에서 2는 전환시 잠깐 멈춰 있는 시간입니다.
<body>와 </body>사이의, 이미지체인징 효과를 넣을 위치에 아래와 같은 방법으로 그림을 넣습니다.
<img src="맨처음시작될 그림" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
여러 개 그림 중에서 제일 먼저 보일 그림을 넣는 것입니다.
duration=2 에서 2는 변환속도입니다. (낮을수록 빠름, 1 미만의 소수도 가능)
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
