菜鳥學JS(三) 自動隱藏的懸浮框

2022-04-14 19:35:10 字數 1396 閱讀 5292

今天寫乙個小例項,用js和css寫乙個可以自動隱藏的懸浮框。css肯定是用來控制樣式的,js用來控制器顯示與隱藏的。顯示與隱藏通常有兩種方法實現:1,用js控制其顯示屬性;2,用js控制其大小。

今天要說的就是通過控制其大小來實現元素的顯隱,原理:為其註冊滑鼠移入、移出的事件,當滑鼠移出物件範圍,將其寬度設為1,當滑鼠再次移入該物件,將其寬度還原。很簡單,我們一起看看吧!

隱藏狀態:

左邊那一條窄線就是隱藏以後的懸浮框。

顯示狀態:

當滑鼠滑到左邊的懸浮框上,懸浮框就又顯示出來了。

css樣式:

js**:

html**:

<

body

>

<

div

class

="w"

id="mydiv"

onmousemove

="myshow()"

onmouseout

="myhide()"

>

<

div

class

="t"

>學生資訊

div>

<

div

class

="winbody"

>

學號:<

label

>0123456789

label

><

br><

br>

姓名:<

label

>小明

label

><

br><

br>

學院:<

label

>軟體學院

label

><

br><

br>

專業:<

label

>軟體工程

label

><

br><

br>

班級:<

label

>一班

label

><

br><

br>

div>

div>

body

>

用懸浮框來顯示一些資訊,當需要看的時候,指向它,它就會乖乖的出來,很方便;當不需要的時候滑鼠移開,它又會很識趣的自己默默離開。雖然很簡單,但是卻有不錯的使用者體驗,做出讓使用者用著舒服的東西,是我們不變的追求。

菜鳥學JS(三) 自動隱藏的懸浮框

今天寫乙個小例項,用js和css寫乙個可以自動隱藏的懸浮框。css肯定是用來控制樣式的,js用來控制器顯示與隱藏的。顯示與隱藏通常有兩種方法實現 1,用js控制其顯示屬性 2,用js控制其大小。今天要說的就是通過控制其大小來實現元素的顯隱,原理 為其註冊滑鼠移入 移出的事件,當滑鼠移出物件範圍,將其...

菜鳥學JS 自動隱藏的懸浮框

今天寫乙個小例項,用js和css寫乙個可以自動隱藏的懸浮框。css肯定是用來控制樣式的,js用來控制器顯示與隱藏的。顯示與隱藏通常有兩種方法實現 1,用js控制其顯示屬性 2,用js控制其大小。今天要說的就是通過控制其大小來實現元素的顯隱,原理 為其註冊滑鼠移入 移出的事件,當滑鼠移出物件範圍,將其...

Hibernate學習 三 自動建表

一般情況下有如下兩種方法 1 在配置檔案中新增如下配置 create 然後我們再執行任何檢索 更新等操作的時候就會自動建表 2.編寫乙個方法,方法內容如下 configuration conf new configuration conf.configure hibernate.cfg.xml sc...