레이어의 클립과 스윕에 대해 알아본다. 설명보다는 직접 데모를 보고 어떻게 동작하는지를 알아보고 각각의 사용방법을 익혀보자. 이것은 많은 곳에 응용이 가능하다.
| HTML Example | <html>
<head>
<title>Hellow Homepage - DHTML </title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>
<body bgcolor=white>
<script language="JavaScript1.2">
var test="test";
content='<img src=../img/title_dhtml.gif border=0>';
createLayer(test,5,5,468,60,0,content);
clipLayer(test,0,0,0,60);
showLayer(test);
swipeLayer(test,0,0,468,60,200);
</script>
</body>
</html> | | |
|
| 설명 | 적용결과에 나타나는 효과를 얻기 위해서는 다음의 두개의 함수 사용법을 알야겠다. 먼저 함수 부터 알아보자.
clipeLayer(name,clipleft,cliptop,clipright,clipbottom);
swipeLayer(name,clipleft,cliptop,clipright,clipbottom,speed);
적용결과에서 보여지는 대로 처음에는 스윕효과를 얻기 위해 레이어를 클립한다. 즉 스윕효과를 보여주기 위한 시작점이라 생각하면 이해가 빠를것이다. 그리고 스윕효과를 직접 부여하는 swipeLayer() 함수에 스윕의 속도와 스윕의 끝점을 지시하면 된다. 정리해보면
name : createLayer() 로 이미 레이어를 만들때 부여한 레이어 이름이다.
clipleft : 레이어 클립 왼쪽(left)
cliptop : 레이어 클립 위쪽(top)
clipright: clipleft를 기준으로 오른쪽방향으로의 위치(right)
clipbottom : cliptop을 기준으로 아래방향으로의 위치(bottom)
위의 결과보기에는 다음과 같이 입력하였다.
clipeLayer(test,0,0,0,60);
설명하면 left는 0 , top은 0은 레이어안에서 (0,0) 을 의미한다. right는 0 에서 0이란 숫자는 left를 기준으로 right 쪽으로 0 만큼 떨어진 위치를 말한다. bottom은 60 에서 60의 의미는 top을 기준으로 아래(bottom)방향으로 60 만큼 떨어진 위치를 말한다.
swipLayer(test,0,0,468,60,200);
즉 스피는 200이란 이야기고 (0,0,468,60)이란 스윕의 끝점을 지정한다.
이렇게 지정하면 clipLayer에서 지정한 (0,0,0,60)의 시작점에서 스윕을 시작하여 끝점으로 스윕이 된다는 이야기다.
주의할점은 반드시 두개의 함수가 같이 쓰여야 한다는 것이다. |
|
|
|
