基於jquery自己寫滑動門 通用版

2022-03-13 17:01:11 字數 1450 閱讀 2564

今天與大家分享一下,自己寫的滑動門。在網上也搜尋了一下,沒發現比較好的,於是乎自己寫一吧~寫起來也很簡單,為了方便使用,我已經盡量封裝好了。好吧,閒話少說,直接上**吧......

css:

.main

.main_top

.main_top ul

.main_top ul li.h_qian

.main_top ul li.h_hou

.main_content

js:

function

tabchange(obj,p,c,q,h)

html:

<

div

class

="main"

>

<

div

class

="main_top"

>

<

ul>

<

li class

="h_hou"

onmouseover

="tabchange(this,'main','main_content','h_qian','h_hou')"

>第一模組

li>

<

li class

="h_qian"

onmouseover

="tabchange(this,'main','main_content','h_qian','h_hou')"

>第二模組

li>

<

li class

="h_qian"

onmouseover

="tabchange(this,'main','main_content','h_qian','h_hou')"

>第三模組

li>

ul>

div>

<

div

class

="main_content"

>

第1塊

div>

<

div

class

="main_content"

style

="display:none;"

>

第2塊

div>

<

div

class

="main_content"

style

="display:none;"

>

第3塊

div>

div>

**很簡單,不多說了,詳細使用方法請參照demo中tangtab.js裡的注釋。

附:demo

ps:tandy tang祝大家寫**寫的愉快!

CSS滑動門技術

製作網頁時,為了美觀,會製作設定特殊形狀的背景,裡面的字數不一樣,為了使各種特殊形狀能夠自適應元素中文字內容的多少,出現了css滑動門技術.是各種特殊形狀的背景能夠根據文字內容的多少拉伸滑動,可用性更強.最常見的是各種導航欄的滑動門.使用精靈技術 主要是背景位置 和padding撐開盒子,找一很長的...

css滑動門技術

為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少,出現了css滑動門技術。使各種特殊形狀的背景能夠自由拉伸滑動,以適應元素內部的文字內容,可用性更強。最常見於各種導航欄的滑動門。工作原理 滑動門技術的關鍵主要在於拼接,利用css精靈sprite 主要是背景位置position 和盒子paddi...

滑動門 css陰影效果

css陰影效果 drop shadows 一點陰影可以給平板的設計增加縱深的感覺,很多時候我們都是直接用photoshop直接製作帶陰影的以供使用,這裡介紹的是一種不需要修改,而只需要用css完成的技巧.網頁教學網 原理 給 備用的陰影影象 shadow.gif html 如下 網頁教學網 css ...