久久久久无码精品,四川省少妇一级毛片,老老熟妇xxxxhd,人妻无码少妇一区二区

利用JQuery動(dòng)畫實(shí)現(xiàn)滑動(dòng)菜單項(xiàng)效果的步驟及代碼

時(shí)間:2024-11-05 03:39:05 jQuery 我要投稿
  • 相關(guān)推薦

利用JQuery動(dòng)畫實(shí)現(xiàn)滑動(dòng)菜單項(xiàng)效果的步驟及代碼

  效果:

  點(diǎn)擊第二個(gè)菜單項(xiàng)后出現(xiàn)一個(gè)向上滑動(dòng)的動(dòng)畫,控制margin-top底部另一個(gè)div中的文字

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

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

  對(duì)docemnt中所有l(wèi)i綁定一個(gè)hover事件,事件中根據(jù)鼠標(biāo)的狀態(tài)(無非是移入與移除),

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

  代碼如下:

  復(fù)制代碼 代碼如下:

  $(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動(dòng)畫實(shí)現(xiàn)滑動(dòng)菜單項(xiàng)效果的步驟及代碼】相關(guān)文章:

關(guān)jQuery彈出窗口簡單實(shí)現(xiàn)代碼-javascript編程06-07

jquery提交按鈕的代碼07-28

關(guān)于jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法介紹10-01

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

關(guān)于jQuery實(shí)現(xiàn)高亮顯示的方法介紹08-20

JavaScript實(shí)現(xiàn)網(wǎng)頁刷新代碼段08-07

將php實(shí)現(xiàn)過濾UBB代碼09-11

手繪效果圖步驟09-03

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

影視動(dòng)畫的場(chǎng)景設(shè)計(jì)步驟07-03