簡寫網站前端Tab標簽列表緩動切換效果

　　最近瀏覽一個網站時看到一個不錯的tab切換效果，審查元素看了一下，實現起來比較簡單，添加一些元素之后緩動效果看起來很舒服。

　　如上圖，大致效果是鼠標移動到上方TAB標簽上時，TAB的顏色狀態發生轉移，下面的列表切換到相應的模塊。

　　這里根據頁面用p布局了一下結構，如下圖：

　　（頁面結構代碼和樣式代碼太多了，這里就不上傳了。）

　　如何通過移動鼠標到相應的TAB位置（即上圖中p（index-news-menu）中的li元素）從而切換下面的內容模塊（即上圖中p（index-news-list）中的lbox模塊）的同時改變相應TAB標簽的顯示狀態呢？

　　這里我是通過jquer中的語法控制TAB標簽中的on類名實現TAB狀態的切換效果，控制p（index-news-list）的偏移量實現內容模塊切換到對應TAB的效果的，jquery代碼如下：

　　script

　　//新聞切換

　　//獲取鼠標移動到相應的tab標簽

　　$(.index-news-menuli).mouseover(function(){

　　//改變當前tab的顯示狀態，同時清除上一個標簽的選中狀態

　　$(this).addClass(on).siblings().removeClass(on);

　　//將選中狀態的tab標簽其相對于同胞元素的index位置賦值給ni（這里ni是隨便命名的）

　　varni=$(this).index();

　　//將內容模塊index-news-list偏移一次的偏移量賦值給nw（這里nw是隨便命名的）

　　varnw=$(.index-news-list).width()/6;

　　//通過當前tab的index值計算需要偏移的距離，然后將這個值作為內容模塊index-news-list的偏移量

　　$(.index-news-list).css(left，-ni*nw);

　　})

　　/script

　　這樣就實現了上述效果了。

　　但是光這樣實現出來的切換效果是看不到通過偏移來實現切換的那種效果的，預想的效果是鼠標移到到TAB上，下面的內容模塊就相對應的向左較緩慢的偏移到相對應的內容模塊。這里我是通過CSS3中的transition屬性來實現緩動效果的。

　　transition屬性是一個簡寫屬性，用于設置四個過渡屬性：

　　transition-property

　　transition-duration

　　transition-timing-function

　　transition-delay

　　在這里我是通過給p（index-news-list）添加transition：allease.3s;這個屬性來給p（index-news-list）一個偏移時間，從而偏移的時候有個過度時間，就實現緩動效果了。

　　到這里基本就實現了預想的效果，但是，這么多內容模塊網頁一行是排列不下的，而要想不換行的話，就需要p（index-news-list）的寬度足夠大，給足了它的寬度后，網頁底部就會出現一個橫向滾動條，很是影響網頁的美觀，于是我又給p（index-box）加了一個超出隱藏的屬性overflow：hidden;這樣就保證了在網頁上只顯示與當前選中的TAB對應的（lbox）的內容模塊了。

　　當然具體效果看個人喜好了，而且是點擊TAB才切換還是和我這里一樣的鼠標劃上去就切換，都是能設置的。

　　粗糙之作，不妥之處望大家不吝賜教。

　　中企動力專注網站定制，如果你已經設計好了網站效果圖，我們可以制作前端和開發后臺程序。