完美實現導航滑動功能

2022-04-03 05:45:51 字數 2217 閱讀 4364

效果大致是這樣的

**如下

<

div

class

="ntab"

>

<

div

class

="tabtitle100"

>

<

ul id

="mytab100"

>

<

li class

="active"

onmouseover

="ntabs(this,0);"

><

a href

="../welcome/"

>**首頁

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,1);"

><

a href

="#"

>政務公開

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,2);"

><

a href

="#"

>財政資訊

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,3);"

><

a href

="#"

>財政業務

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,4);"

><

a href

="#"

>政策法規

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,5);"

><

a href

="#"

>民生工程

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,6);"

><

a href

="#"

> 制度建設

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,7);"

><

a href

="#"

>網上辦事

a>

li>

<

li class

="normal"

onmouseover

="ntabs(this,8);"

><

a href

="#"

>互動參與

a>

li>

ul>

div>

div>

css**如下

/*

滑動門(舌籤)完美版

*/.ntab.none .ntab .tabtitle100.ntab .tabtitle100 ul.ntab .tabtitle100 li.ntab .tabtitle100 .active.ntab .tabtitle100 .active a.ntab .tabtitle100 .normal.ntab .tabtitle100 .normal a.ntab .tabcontent100.ntab .tabcontent100 a.ntab .tabcontent100 a:hover

切換需要用到的js**如下

function

ntabs(thisobj,num)

else

} }

Android 實現View滑動功能

1.固定區域內滑動 實現view滑動的方式 layout offsetleftandright 和offsettopandbottom layoutparams scrollby 和 scrollto setx 和sety 直接上 使用setx和sety。public class scrollvie...

CSS實現滑動吸頂功能

首先先上效果圖,來篩選需要學習的同伴 驅逐,大佬退散!接下來就是我們的核心實現了 item id沒錯,就是這麼兩行css 一行js 都不需要,開心不開心!接下來就是打擊你們的時候到了,讓我們看看瀏覽器對這個特性的相容性 需要考慮瀏覽器相容性的就要慎重考慮這個實現方案了。檢視特性相容性 caniuse...

利用canvas實現滑動驗證功能

html 滑動驗證 css body canva block versliderblock bar bar mask js 繪製滑塊 新增移動事件 var block slider document.queryselector block var slider document.queryselec...