글 수 109
14
조회 수 : 6109 신고 : 0
![title: [ani]깜빡이는 표정](http://web.webmini.net/./files/iconshop/74a37aadbde84c591808859b369e85e0.gif "title : [ani]깜빡이는 표정")
빽짱구| 미리보기 : |
|---|
<이미지 체인징효과>
여러장의 그림이 부드럽게 바뀌면서 변합니다.
언뜻 보기에는 animation gif 내지는 플래시화일처럼 보이지만, 여러장의 이미지에 트랜지션을 적용한 것입니다.
1.
<head>와 </head> 사이에 아래 소스를 넣습니다.
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "들어갈이미지1.gif";
var img2 = new Image();
img2.src = "들어갈이미지2.gif";
var img3 = new Image();
img3.src = "들어갈이미지3.gif";
//-->
</script>
들어갈이미지1.gif, 들어갈이미지2.gif, 들어갈이미지3.gif 은 사용할 그림의 경로 및 이름입니다.
아래와 같은 방법으로 계속 추가할 수 있습니다.
var img4 = new Image();
img4.src = "들어갈이미지4.gif";
var img5 = new Image();
img5.src = "들어갈이미지5.gif";
2.
<body>태그안에 onLoad="init()" 를 추가합니다.
<body onLoad="init()">
3.
<body>와</body>사이에 의 아무 곳에나 아래 소스를 넣습니다.
<script language="JavaScript">
<!--
var maxLoops = 3;
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은 이미지체인징 되는 그림의 갯수, 여기서는 3개이므로 3
var bInterval = 2; 에서 2는 다음 그림으로 전환할 때까지 잠깐 멈춰 있는 시간
4.
<body>와</body>사이의, 이미지체인징 효과를 넣을 위치에 아래와 같은 방법으로 그림을 넣습니다.
<img src="들어갈이미지1.gif" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
들어갈이미지1.gif 는 맨 처음 시작되는 그림
duration=2 에서 2는 트랜지션의 변환속도 (낮을수록 빠름, 1 미만의 소수도 가능)
여러장의 그림이 부드럽게 바뀌면서 변합니다.
언뜻 보기에는 animation gif 내지는 플래시화일처럼 보이지만, 여러장의 이미지에 트랜지션을 적용한 것입니다.
1.
<head>와 </head> 사이에 아래 소스를 넣습니다.
<script language="JavaScript1.1">
<!--
var img1 = new Image();
img1.src = "들어갈이미지1.gif";
var img2 = new Image();
img2.src = "들어갈이미지2.gif";
var img3 = new Image();
img3.src = "들어갈이미지3.gif";
//-->
</script>
들어갈이미지1.gif, 들어갈이미지2.gif, 들어갈이미지3.gif 은 사용할 그림의 경로 및 이름입니다.
아래와 같은 방법으로 계속 추가할 수 있습니다.
var img4 = new Image();
img4.src = "들어갈이미지4.gif";
var img5 = new Image();
img5.src = "들어갈이미지5.gif";
2.
<body>태그안에 onLoad="init()" 를 추가합니다.
<body onLoad="init()">
3.
<body>와</body>사이에 의 아무 곳에나 아래 소스를 넣습니다.
<script language="JavaScript">
<!--
var maxLoops = 3;
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은 이미지체인징 되는 그림의 갯수, 여기서는 3개이므로 3
var bInterval = 2; 에서 2는 다음 그림으로 전환할 때까지 잠깐 멈춰 있는 시간
4.
<body>와</body>사이의, 이미지체인징 효과를 넣을 위치에 아래와 같은 방법으로 그림을 넣습니다.
<img src="들어갈이미지1.gif" name="blendtrjs" border="0" style="filter: blendTrans(duration=2)">
들어갈이미지1.gif 는 맨 처음 시작되는 그림
duration=2 에서 2는 트랜지션의 변환속도 (낮을수록 빠름, 1 미만의 소수도 가능)
글쓴이 빽짱구
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
첫번째 댓글을 남겨주세요!
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기