DHTML 슬라이드 쇼 프로그램 (1)
저자：Eve Cole
업데이트 시간：2009-06-20 17:00:35
슬라이드 쇼 프로그램은 사진을 차례로 재생하는 프로그램입니다. 일부 사이트에서 이러한 형태의 광고 재생 막대를 볼 수 있는데, 대부분은 CGI로 제작되었습니다. 이는 서버가 ASP, PHP, Perl 등과 같은 CGI 프로그램을 지원해야 함을 의미합니다. 그러나 여기서 구현 방법에는 CGI가 필요하지 않으며 CSS 효과와 JavaScript 제어만 사용됩니다. 귀하의 브라우저가 IE 4.0 이상 또는 Netscape 3.0 이상이라면 가능합니다. 여기서는 IE에만 나타날 수 있는 CSS 필터 효과를 사용합니다. CSS의 필터 효과에 대한 자세한 내용은 Yesky.com에 게시된 "CSS의 필터에 대한 자세한 설명"을 참조하세요.
좋아, 몇 가지 준비를 해보자.
우선, 이 효과를 만들기 위해서는 먼저 같은 크기의 사진 여러 장을 만들어서 차례로 재생해야 합니다. 예를 들어, 사용된 이미지로 다음과 같은 88x31 사진 3장을 찾았습니다.
둘째, CSS의 필터 이미지 변환 필터에 대한 지식을 검토해 보겠습니다.
CSS에 변환 필터 표시
디스플레이 변환 필터는 페이드인 및 페이드아웃 효과만 제공하는 하이브리드 변환 필터와 달리 더 다양한 이미지 변환 효과를 제공합니다.
필터: RevealTrans(기간 = 변환할 시간(초), 전환 = 변환 유형)
보시다시피 변환 유형 매개변수가 있습니다. 여기서는 24가지 변환 유형을 제공하며, 고유한 변환 효과에 따라 이미지를 변환하려면 변환 유형의 코드명만 지정하면 됩니다. 다음 표는 24개의 변환 필터 형식과 해당 코드를 보여줍니다.
| 변환 필터의 변환 형태 | 에 | 해당하는 코드를 | 표시 | 합니다.
| 직사각형이 큰 것부터 작은 | 것 | 까지 | 0 |
| 작은 것부터 | 큰 것 | 까지 12개의 직사각형이 수직으로 안쪽으로 나뉜다. | 13 | 개의
| 원이 큰 것부터 작은 것까지. | 2 | 수직 바깥쪽으로 분할 | 14 |
| 둥근 소형에서 대형으로 | 3 | 수평 내부 분할 | 15 |
| 위쪽으로 밀기 | 4 | 수평으로 바깥쪽으로 분할 | 16 |
| 아래쪽으로 밀기 | 5 | 왼쪽 및 아래쪽으로 벗기기 | 17 |
| 오른쪽으로 밀기 | 6 | 왼쪽 위로 | 벗기기 18 |
| 왼쪽으로 밀어 열기 | 7 | 오른쪽으로 벗기기 | 19 |
| 수직 블라인드 | 8 | 벗기기 위쪽 및 오른쪽 | 20 |
| 가로 블라인드 | 9 | 임의 가로 미세선 | 21 |
| 가로 체크무늬 | 10 | 임의 세로 미세선 | 22 |
| 세로 체크무늬 | 11 | 특수효과 랜덤 선택 | 23 |
