這次帶給大家的是JavaScript實現個性導航欄特效,我們知道萬能的JS是可以實現很多特效的,這篇文章就給大家好好分析一下。
實作原理:
什麼是筋斗雲效果:
•這個效果很簡單,就是滑鼠移到其他導航目錄時會有背景圖片跟著滑鼠滑動到當前的目錄。
實現想法:
•滑鼠經過的時候,利用offsetLeft獲得當前盒子距離左側的距離,把這個值賦給緩動動畫的end值。
•當點擊的時候記住當前的offsetLeft值,當滑鼠經過的時候把之前點擊的offsetLeft給現在經過時候的值。
實作程式碼:
以下是實作程式碼以及詳細註釋,核心設定一個position為absolute的span標籤,透過綁定滑鼠事件,用封裝好的animate動畫實作span的「筋斗雲”效果。
相信看了以上介紹你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
#以上是JavaScript實作個性導航列特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!