實現效果:
實作效果如下圖
實作原理:
什麼是筋斗雲效果:
•這個效果很簡單,就是滑鼠移到其他導航目錄時會有背景圖片跟著滑鼠滑動到目前的目錄。
實現想法:
•滑鼠經過的時候,利用offsetLeft來獲得目前盒子距離左側的距離,把這個值賦給緩動動畫的end值。
•當點擊的時候記住當前的offsetLeft值,當滑鼠經過的時候把之前點擊的offsetLeft給現在經過時候的值。
實作程式碼:
下面是實作程式碼以及詳細註釋,核心設定一個position為absolute的span標籤,透過綁定滑鼠事件,用封裝好的animate動畫實現span的「筋斗雲」效果。
總結
#以上是JavaScript實現精美個性導覽列筋鬥雲效果的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!