簡寫網(wǎng)站前端Tab標(biāo)簽列表緩動(dòng)切換效果

最近瀏覽一個(gè)網(wǎng)站時(shí)看到一個(gè)不錯(cuò)的tab切換效果，審查元素看了一下，實(shí)現(xiàn)起來比較簡單，添加一些元素之后緩動(dòng)效果看起來很舒服。

如上圖，大致效果是鼠標(biāo)移動(dòng)到上方TAB標(biāo)簽上時(shí)，TAB的顏色狀態(tài)發(fā)生轉(zhuǎn)移，下面的列表切換到相應(yīng)的模塊。
這里根據(jù)頁面用div布局了一下結(jié)構(gòu)，如下圖：

（頁面結(jié)構(gòu)代碼和樣式代碼太多了，這里就不上傳了。）
如何通過移動(dòng)鼠標(biāo)到相應(yīng)的TAB位置（即上圖中 div（index-news-menu）中的 li 元素）從而切換下面的內(nèi)容模塊（即上圖中 div （index-news-list）中的 lbox 模塊）的同時(shí)改變相應(yīng)TAB標(biāo)簽的顯示狀態(tài)呢？
這里我是通過jquer 中的語法控制TAB標(biāo)簽中的”on”類名實(shí)現(xiàn)TAB狀態(tài)的切換效果，控制div （index-news-list）的偏移量實(shí)現(xiàn)內(nèi)容模塊切換到對應(yīng)TAB的效果的，jquery代碼如下：
<script>
//新聞切換
//獲取鼠標(biāo)移動(dòng)到相應(yīng)的tab標(biāo)簽
$(".index-news-menu li").mouseover(function () {
//改變當(dāng)前tab的顯示狀態(tài)，同時(shí)清除上一個(gè)標(biāo)簽的選中狀態(tài)
$(this).addClass("on").siblings().removeClass("on");
//將選中狀態(tài)的tab標(biāo)簽其相對于同胞元素的 index 位置賦值給 ni（這里ni是隨便命名的）
var ni = $(this).index();
//將內(nèi)容模塊index - news - list偏移一次的偏移量賦值給nw（這里nw是隨便命名的）
var nw = $(".index-news-list").width() / 6;
//通過當(dāng)前tab的index值計(jì)算需要偏移的距離，然后將這個(gè)值作為內(nèi)容模塊index - news - list的偏移量
$(".index-news-list").css("left", - ni * nw );
})
</script>
這樣就實(shí)現(xiàn)了上述效果了。
但是光這樣實(shí)現(xiàn)出來的切換效果是看不到通過偏移來實(shí)現(xiàn)切換的那種效果的，預(yù)想的效果是鼠標(biāo)移到到TAB 上，下面的內(nèi)容模塊就相對應(yīng)的向左較緩慢的偏移到相對應(yīng)的內(nèi)容模塊。這里我是通過CSS3中的transition 屬性來實(shí)現(xiàn)緩動(dòng)效果的。
transition 屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè)過渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
在這里我是通過給div （index-news-list）添加transition:all ease .3s;這個(gè)屬性來給div （index-news-list）一個(gè)偏移時(shí)間，從而偏移的時(shí)候有個(gè)過度時(shí)間，就實(shí)現(xiàn)緩動(dòng)效果了。
到這里基本就實(shí)現(xiàn)了預(yù)想的效果，但是，這么多內(nèi)容模塊網(wǎng)頁一行是排列不下的，而要想不換行的話，就需要div （index-news-list）的寬度足夠大，給足了它的寬度后，網(wǎng)頁底部就會(huì)出現(xiàn)一個(gè)橫向滾動(dòng)條，很是影響網(wǎng)頁的美觀，于是我又給div（index-box）加了一個(gè)超出隱藏的屬性overflow:hidden; 這樣就保證了在網(wǎng)頁上只顯示與當(dāng)前選中的TAB對應(yīng)的（lbox）的內(nèi)容模塊了。
當(dāng)然具體效果看個(gè)人喜好了，而且是點(diǎn)擊TAB才切換還是和我這里一樣的鼠標(biāo)劃上去就切換，都是能設(shè)置的。
粗糙之作，不妥之處望大家不吝賜教。

文章名稱：簡寫網(wǎng)站前端Tab標(biāo)簽列表緩動(dòng)切換效果
網(wǎng)站路徑：http://www.muchs.cn/news10/242410.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站改版、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)