기본 원리
이러한 동적 슬라이딩 박스는 동일한 기본 원리를 기반으로 합니다. ".boxgrid"가 포함된 DIV 태그는 "관찰"하려는 개체의 다른 두 항목을 전달한 후 창 역할을 합니다. 확실하지 않으신가요? 이 그림을 통해 힌트를 얻으세요.
이 기본 원리를 이해한 후에는 슬라이딩 요소의 애니메이션 효과를 사용하여 표시할 영역을 밝히거나 덮어 슬라이딩 효과를 만들 수 있습니다.
효과를 미리 보려면 클릭하세요. 이 예제의 소스 파일을 다운로드하세요.
1단계 – CSS 기초
기본 구조를 제공하는 위의 영감 다이어그램에서 원하는 효과를 표시하려면 약간의 CSS를 사용해야 합니다. 다음 CSS는 보기 창(.boxgrid)을 정의하고 LEFT 및 TOP에 이미지의 기본 POSITION을 설정합니다. 이는 슬라이딩 시 설명이 겹치는 데 매우 중요합니다. 그리고 Overflow:hidden이 이를 가능하게 한다는 것을 잊지 마세요.
.boxgrid{
너비: 325px;
높이: 260px;
여백:10px;
부동:왼쪽;
배경:#161613;
테두리: 실선 2px #8399AF;
오버플로: 숨김;
위치: 상대;
}
.boxgrid img{
위치: 절대;
상단: 0;
왼쪽: 0;
테두리: 0;
}
CSS를 사용하여 반투명한 설명을 얻을 준비가 되지 않은 경우 두 번째 단계로 바로 이동할 수 있습니다.
.boxcaption{
플로트: 왼쪽;
위치: 절대;
배경: #000;
높이: 100px;
너비: 100%;
불투명도: .8;
/* IE 5-7의 경우 */
필터: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* IE 8의 경우 */
-MS-필터: "progid:DXImageTransform.Microsoft.Alpha(불투명도=80)";
}
이제 캡션 상자의 기본 시작점을 설정해야 합니다. (내 생각에는 상자보다 레이어가 더 나은 것 같습니다.) 초기화 시 완전히 숨기려면 TOP 및 LEFT를 창(.boxgrid)의 높이와 너비로 설정해야 하며, 이는 (물론) 슬라이드하려는 방향에 따라 결정됩니다. 또한 이 (CSS 정의) .caption 및 .boxcaption에 따라 초기화 시 일부만 표시하도록 할 수도 있습니다.
.captionfull .boxcaption {
상단: 260;
왼쪽: 0;
}
.caption .boxcaption {
상단: 220;
왼쪽: 0;
}
출처 : 행복한 즐겨 찾기