簡寫網站前端Tab標簽列表緩動切換效果 曹鵬seo教程

最近瀏覽一個網站時看到一個不錯的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代碼如下：

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

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

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

transition-property

transition-duration

transition-timing-function

transition-delay

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

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

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

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

小知鳥科技專注網站定制，如果你已經設計好了網站效果圖，我們可以制作前端和開發后臺程序。

簡寫網站前端Tab標簽列表緩動切換效果 曹鵬seo教程 seo提交