jquery css寫的一款簡單的tabs滑動特效

2021-06-22 11:11:33 字數 1137 閱讀 2107

最終實現的效果,都是採用css來實現美化介面的,,現在想到的就是都是吧資料都展示出來,其他隱藏。。滑動的時候到**就顯示對應欄目的內容,但是最近看到火狐的首頁,有很多選單項,不知道是不是也是全部顯示到頁面上了,然後其他內容隱藏,滑動時,在對應顯示內容,如下:

如果有答案的希望分享下,是怎麼處理這種的。。。

那接下來上**html:

首先那個標題左邊的紅色小塊和數字背景快,我都是直接使用span標籤來實現的。。

然後是css樣式:

.hot-news-tabs

.hot-news-tabs .hot-news-tabs-title

.hot-news-tabs .hot-news-tabs-title span

.hot-news-tabs .hot-news-tabs-btn

.hot-news-tabs .hot-news-tabs-btn li

.hot-news-tabs .hot-news-tabs-btn li.current

.hot-news-tabs .hot-news-tabs-cont

.hot-news-tabs .hot-news-tabs-cont li

.hot-news-tabs .hot-news-tabs-cont li span.num

.hot-news-tabs .hot-news-tabs-cont li span.redbg

重點是這些,當然,前面我有加入yui的reset的css樣式,這裡沒指出來,還有中間的昨日、今日、一周的實現我是直接使用li的border來寫,然後結合負margin來實現中間的border重疊,當然這樣的話,整體會左偏移一畫素,所以我右對負的ulmargin-left:1px來右移達到對齊效果。。

$(document).ready(function() ,function(){});

});最後特效的實現就是jq啦,很簡單吧,就幾句話,當然最後別忘了引入jq的cdn位址

js寫的一款前端小遊戲

拖延症晚期的我原本計畫趁著週末寫個年終總結,但是一直沒有什麼思路,想來想去也沒想到要寫啥就胡亂寫了這麼乙個小東西。一直比較痴迷遊戲行業,可能我不太適合做前端,應該去學c 首先當然是選擇一張背景圖,作為整個場景中的地圖,而且要大要高畫質。布局到頁面中。然後通過可視區值展示這張的一小部分。我這裡用的是寬...

Go C 一款簡單的貪吃蛇

前言 這是一款執行在window上簡單貪吃蛇,需要電腦上gcc編譯c語言 可以參考win10下安裝gcc g package main import fmt math rand os snake clib strconv time 全域性常量 const width 40 地圖寬度 height 2...

Golang寫的一款子網域名稱爆破工具

由於疫情的橫行,只能躲在家裡進行學習,根據這幾天的學習成果,寫了一款子網域名稱爆破的工具。該工具開源 如下,需要改進的可以自行修改,根據字典來爆破,支援多執行緒。type aoligei struct 整體結構體 該方法控制網域名稱的生成 fmt.printf 爆破成功 domain s ip s ...