首頁 > 網際網路

JS基礎-簡單利用JQuery製作導航動畫

2019-12-11 09:39:35

JS基礎-簡單利用JQuery製作導航動畫

1

開啟Dreamewaver軟體後,ctrl+n新建HTML檔案


2

在body中建立ul li標籤,製作一個簡單的導航


3

然後在head標籤中將jquery.js檔案引入,並對ul li清除自身屬性,對其進行簡單修飾,如圖


4

最後在瀏覽器中的效果顯示是這樣的,如圖所示


5

然後對其進行編輯修正,滑鼠經過用.mouseenter(),當滑鼠經過文字時,就會發生變換,

這裡當滑鼠經過時,文字上下邊框會出現


6

這樣設定後,在瀏覽器中預覽效果,當滑鼠經過文字時,就會在上和下兩個方向出現橫線標誌


7

然後我們在編輯滑鼠移開後的效果,當滑鼠移開後,邊框消失,如圖設定.mouseleave屬性


8

當滑鼠經過文字時,上下邊框會出現,當滑鼠移開後邊框消失。



IT145.com E-mail:sddin#qq.com