使用jQuery製作滑動動畫效果的圖層

基本原理

這些具有動態效果的滑動盒都是基於相同的基本原理。在你經過想要"窺見"物件中的其他兩個項目，這個帶有".boxgrid"的DIV標籤充當著一個視窗。還不明白? 讓這個圖片來給你線索：

在了解這個基本原理之後，我們就可以利用滑動元素的動畫效果來揭開或遮蓋住要展示的區域，以此來創造滑動效果。

點擊預覽效果預覽　 下載這個實例的來源文件

第一步– CSS 基礎工作

在上面給出基本結構的啟示圖中，我們需要使用一點CSS來讓它顯示出預期的效果。下面這個CSS定義了查看視窗(.boxgrid) 並的在LEFT和TOP設定圖片的預設POSITION，這對於滑動時的重疊交代很重要。並且不要忘記overflow:hidden將使這一切成為可能。

.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}

如果你不準備用CSS來實現半透明的描述，可直接跳向第二步：

.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

現在，我們需要設定說明層（caption box，覺得用層好過於盒）的預設的起點。如果想要讓其初始化的時候完全隱藏，這將需要設定TOP和LEFT為你的視窗(.boxgrid)的高和寬，（當然）這是由所要滑動的方向決定的。你也可以讓它在初始化的時候只顯示一部分，像這個（CSS所定義的）.caption和.boxcaption所給的：

.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}

出處：幸福收藏夾