DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery教程:制作滑動動畫效果的層
jQuery教程:制作滑動動畫效果的層
編輯:AJAX詳解     

使用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;
 }

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved