你對DIV+CSS滑動門技術的概念和使用是否熟悉，這里和大家分享一下，其實DIV+CSS滑動門技術是一種只需要鼠標懸停便可自動切換板塊的JS特效，相信本文介紹一定會讓你有所收獲。

DIV+CSS滑動門技術簡介

滑動門是一種只需要鼠標懸停便可自動切換板塊的JS特效。需要說明的是如果要減少板塊，一定要把JS特效中的相應的板塊li的id去掉，否則無法正常顯示。比如要將第五項“<li class="sd02" id="m05">滑動門</li>”、“<div id="c05" class="hidden"> 第五層內容 </div>”這兩個刪除的話也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05刪除，才能正常顯示。

DIV+CSS中的滑動門技術

美觀的工藝，真正靈活的接口組件，并根據文本自適應大小，我們可用兩個獨立的背景圖像來創造它。一個在左邊，一個在右邊。把這兩幅圖像想象成兩扇可滑動的門，它們滑到一起并交迭，占據一個較窄的空間；或者相互滑開，占據一個較寬的空間，就像下圖所顯示的那樣：

這就是使用了DIV+CSS滑動門技術，在這個模型中,一個圖像掩蓋住另一個圖片的一部分。假設我們放置一些獨特的內容在每個圖像的周圍，例如標簽的圓角，我們并不希望上面一副圖像完全的遮蔽住下面一副。為了防止這種情況的發生，我們可以將上面一副圖像（此例中的左邊那幅）控制的盡可能的窄。但仍然要保證一定的寬度來顯現標簽一側的獨特性。如果外部是圓角，我們就應該控制上面一副圖像和它的弧線部分具有一樣的寬度。

如果目標在大小上增長，并超過了以上所顯示的寬度，歸咎于文本大小及字體的改變，圖像會被拉開，產生不美觀的間隙。我們需要判斷的是，預測這種可擴展的量將有多大。如果在瀏覽器中改變字體的大小，目標又會如果增長呢？實際來說，我們至少應該估算到字體大小增長至300%的情況。背景圖像也得適應這種增長。對于以上的例子，我們將下面（即右邊）的圖像設為400*150像素，上面的設為9*150像素。

在頭腦中，始終要有這樣的認識：背景圖像只是顯示一個可供內容填充的有效空間（即內容區域和padding，稱為doorway）。這兩幅圖像始終和各自外部的邊角相錨定。背景圖像的可見部分和在一起即形成了一個具有這種標簽形狀的空間（doorway）：

如果標簽被撐大，圖像即滑開，doorway變寬，圖像的也將被顯露的更多：

此例中，我在photoshop中制作兩個平滑，細的3D標簽圖像，如文章開頭所顯示的那樣。對于其一，內部明亮，邊框暗淡些，用來表現當前選中的標簽。將這種技巧模型應用于左右兩幅圖像中，我們需要擴大標簽圖像覆蓋的區域，將它裁剪成兩部分：

同樣的方式將應用到被稱為“當前”的標簽中。一旦我們完成了這四幅圖像（1, 2, 3, 4），我們就可以開始用標記和CSS來制作我們的標簽了，對DIV+CSS滑動門技術就簡單介紹到這里，請關注本文的其他相關報道。

【編輯推薦】

1. CSS解決DIV居中相關問題
2. 五大CSS3新技術用法指導
3. CSS中border和clear兩大屬性用法揭秘
4. 實例解析CSS DIV絕對定位與固定定位用法
5. 解讀DIV CSS網頁布局中CSS無效十個原因