亚洲国产精品成人无码区,公天天吃我奶躁我的比视频,亚洲国产欧美视频亚洲国产精品一区二区成人片不卡,天天躁日日躁狠狠躁视频2021,起视碰看97视频在线少妇久久久久久人妻无码, 芒果乱码一线二线三线新区 ,亚洲熟妇无码AⅤ不卡在线播放,人妻少妇乱子伦无码专区

400-800-9385
網(wǎng)站建設(shè)資訊詳細

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

發(fā)表日期:2018-11-13 10:31:06   作者來源:方維網(wǎng)絡(luò)   瀏覽:4506   標簽:    
最近瀏覽一個網(wǎng)站時看到一個不錯的tab切換效果,審查元素看了一下,實現(xiàn)起來比較簡單,添加一些元素之后緩動效果看起來很舒服。
 

首頁新聞切換效果

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

方維網(wǎng)絡(luò)專注網(wǎng)站定制,如果你已經(jīng)設(shè)計好了網(wǎng)站效果圖,我們可以制作前端和開發(fā)后臺程序。

如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://www.oulysa.com/news/4738.html
相關(guān)網(wǎng)站設(shè)計案例
2020最新国产精品极品| 久久精品国产99久久无毒不卡| 人妻精品一区二区不卡视频| 国产午夜在线视频免费抢先看| 午夜爽爽爽男女免费观看影院| 少妇人妻系列1~100| 亚洲va欧美va天堂v国产综合| 亚洲精品无码鲁网午夜| 国产精品 猎奇 另类视频| 欧美老熟妇又粗又大| 久久久五月天亚洲天堂中文字幕在线观看| 免费AV在线播放亚州一级毛片在线| 精品无码人妻夜人多侵犯18| 国产乱子伦精品无码专区| 久久久久无码国产精品一区| 国产一级a毛一级a看免费视频| 久久人人妻人人做人人爽| 国产—久久香蕉国产线看观看| 寡妇高潮一级毛片免费看| 国产精品亚洲欧美大片在线看| 欧美视频一区二区三区| 国产精品无码免费专区午夜| 王丽坤一级毛片免费观看| 久久综合久久爱久久综合伊人 | 2021av天堂网中文手机| 一级a毛片免费观看久久精品| 人妻丰满熟妇AⅤ无码区| 久久久久久久99精品免费.| 十国产十欧美十岛国在线观看| 无码午夜人妻一区二区三区不卡视频| 黄网站色视频免费观看| 深夜影院亚洲精品无码| 无码精品人妻一区二区三区漫画| 国产成人AV日韩色情| 国产精品福利一区二区| 国产一区二区三区不卡AV| 欧美日韩精品一区二区视频| 国产中文欧美日韩在线| 国产精品自在欧美一区| 日本一区二区三区视频永远| av永久天堂一区二区三区|