<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

    主站蜘蛛池模板: 东京热TOKYO综合久久精品| 99精品国产自在现线观看| 精品国产一区AV天美传媒| 国产av无码专区亚洲国产精品| 偷拍精品视频一区二区三区| 日本一区精品久久久久影院 | 99热精品在线观看| 亚洲精品A在线观看| 国产精品VIDEOSSEX久久发布| 国内精品久久久人妻中文字幕| 青春草无码精品视频在线观| 国产精品五月天强力打造| 国产精品视频一区国模私拍| 日本一卡精品视频免费| 老司机精品影院91| 国产精品亚洲精品日韩已方| 久久99国产精品久久久| 国产精品亚洲а∨无码播放| 中文字幕乱码中文乱码51精品| 蜜臀精品无码AV在线播放| 国产精品国产三级在线专区| 国产伦精品一区二区三区女| 国产亚洲色婷婷久久99精品| 午夜不卡久久精品无码免费| 亚洲精品无码久久不卡| 久久精品国产色蜜蜜麻豆| 国产精品第一页在线| 91国内揄拍国内精品情侣对白 | 国内精品99亚洲免费高清| 91精品国产高清久久久久久91| 欧美国产日本精品一区二区三区| 99久久精品国产高清一区二区 | 亚洲AV无码久久精品蜜桃| 亚欧乱色国产精品免费视频| 久久久精品国产亚洲成人满18免费网站 | 美女岳肉太深了使劲国产精品亚洲专一区二区三区 | 中文字幕精品无码一区二区三区 | 97精品国产一区二区三区| 精品永久久福利一区二区| 欧美日韩人妻精品一区二区在线| 少妇伦子伦精品无码STYLES|