이제 응용에 응용을 해보자. 단순하게 몇가지 함수만을 사용하여 아래에 보여지는 여러가지 효과를 부여할 수 있다. 먼저 소스를 보고 이해가 안되는 부분은 설명부분을 참조하면 된다. 이 소스가 이해가 안된다면 처음부터 다시 읽기를 권한다.
| HTML Example | <html>
<head>
<title>Hellow Homepage - DHTML</title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>
<body bgcolor=black>
<script language="JavaScript1.2">
function hideall(){
hideLayer(img1);
hideLayer(img2);
hideLayer(img3);
return true;
}
function move1(){
hideall();
moveLayer(img1,-100,0);
showLayer(img1);
slideLayer(img1,30,30,200);
slideLayer(img1,60,50,200);
slideLayer(img1,90,80,200);
slideLayer(img1,120,90,200);
slideLayer(img1,150,150,200);
slideLayer(img1,180,170,200);
slideLayer(img1,210,200,200);
slideLayer(img1,240,100,200);
slideLayer(img1,270,150,200);
slideLayer(img1,300,180,200);
slideLayer(img1,400,150,200);
setTimeout('move2()',1000*7);
return true;
}
function move2(){
hideall();
moveLayer(img2,300,30);
showLayer(img2);
slideLayer(img2,290,30,200);
slideLayer(img2,240,50,200);
slideLayer(img2,210,80,200);
slideLayer(img2,180,90,200);
slideLayer(img2,130,170,200);
slideLayer(img2,90,200,200);
slideLayer(img2,40,100,200);
slideLayer(img2,10,150,200);
slideLayer(img2,-30,100,200);
slideLayer(img2,-60,150,200);
slideLayer(img2,-90,100,200);
slideLayer(img2,-120,150,200);
setTimeout('move3()',1000*8);
return true;
}
function move3(){
hideall();
moveLayer(img3,-200,330);
showLayer(img3);
slideLayer(img3,-200,120,300);
slideLayer(img3,-200,530,100);
setTimeout('move1()',1000*8);
return true;
}
</script>
<script language="JavaScript1.2">
var img1="img1";
content='<img src=./img/17_03.gif border=0 width=100 height=76>';
createLayer(img1,0,0,100,76,0,content);
var img2="img2";
content='<img src=./img/17_02.gif border=0 width=100 height=76>';
createLayer(img2,0,0,100,76,0,content);
var img3="img3";
content='<img src=./img/17_01.gif border=0 width=520 height=390>';
createLayer(img3,0,0,520,390,0,content);
move1();
</script>
</body>
</html> |
| | |
|
| 설명 | 사용된 이미지는 각각 다음과 같다.
이번 예제는 별다른게 없다. 단지 각각의 함수를 호출하고 다음에 일어날 상황을 예측하여 다음에 발생할 상황을 함수로 만들고 처음 함수가 끝나고 다음에 일어날 함수의 발생시간을 정확하게 맞추는 일이다.
예제를 보면 그냥 몇가지일을 계속 반복하고 있다는 것을 알 수 있을 것이다.
재미있게 구성해 보면 스스로 더 멋지게 꾸밀 수 도 있을 것이다.
|
|
|
|
|
