<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • 利用JQuery動畫實現滑動菜單項效果的步驟及代碼

    時間:2024-11-05 03:39:05 jQuery 我要投稿
    • 相關推薦

    利用JQuery動畫實現滑動菜單項效果的步驟及代碼

      效果:

      點擊第二個菜單項后出現一個向上滑動的動畫,控制margin-top底部另一個div中的文字

      上移從而替換掉原有的文字。

      原理其實不難無非就是css的控制加之jquery的代碼

      對docemnt中所有li綁定一個hover事件,事件中根據鼠標的狀態(無非是移入與移除),

      使用animate的動畫方式使原有的div向上移70px,移出時再將頁面效果變回原有的樣子。

      代碼如下:

      復制代碼 代碼如下:

      $(function () {

      var webNav = {

      val: {

      target: 0

      },

      init: function () {

      $(".gnb ul li").on("hover", webNav.hover);

      },

      hover: function (e) {

      if ($(this).index() == webNav.val.target) { return };

      if (e.type == "mouseenter") {

      $(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);

      } else if (e.type == "mouseleave") {

      $(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);

      }

      }

      };

      webNav.init();

      });

    【利用JQuery動畫實現滑動菜單項效果的步驟及代碼】相關文章:

    關jQuery彈出窗口簡單實現代碼-javascript編程06-07

    jquery提交按鈕的代碼07-28

    關于jquery簡單圖片切換顯示效果實現方法介紹10-01

    基于jQuery的固定表格頭部的代碼08-30

    關于jQuery實現高亮顯示的方法介紹08-20

    JavaScript實現網頁刷新代碼段08-07

    將php實現過濾UBB代碼09-11

    手繪效果圖步驟09-03

    手繪效果圖技巧及步驟09-02

    影視動畫的場景設計步驟07-03

    主站蜘蛛池模板: 日韩欧精品无码视频无删节| 国产精品无圣光一区二区| 中文字幕精品无码一区二区三区| 国产精品一区二区久久| 亚洲精品国产精品乱码不卡| 国产99视频精品专区| 国产乱人伦偷精品视频免下载| 牛牛在线精品观看免费正| 亚洲国产精品久久久久婷婷老年| 久久精品亚洲精品国产色婷| 久久久精品人妻无码专区不卡| 亚洲国产精品嫩草影院| 国99精品无码一区二区三区 | 无码精品日韩中文字幕| 久久97久久97精品免视看秋霞| 久久99精品综合国产首页| 国自产偷精品不卡在线| 亚洲精品无码不卡在线播HE| 久久人人超碰精品CAOPOREN| 国产精品超碰12396| 日韩精品免费视频| 久久er热视频在这里精品| 国产精品9999久久久久| 精品久久久久久无码专区| 日韩AV无码精品人妻系列| 中文国产成人精品久久不卡| 人妻少妇看A偷人无码精品视频| 精品国产爽爽AV| 精品国产青草久久久久福利| 国产啪亚洲国产精品无码| 国产精品免费久久| 国产成人精品免费大全| 中文字幕精品一区二区日本| 99热成人精品国产免男男| 999精品色在线播放| 成人精品一区二区久久| 国产成人亚洲精品影院| 国产精品亚洲欧美大片在线观看| 国产精品极品| 精品多毛少妇人妻AV免费久久| 精品人妻无码专区中文字幕|