1#
效果:



点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字
上移从而替换掉原有的文字。



原理其实不难无非就是css的控制加之jquery的代码
对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除),
使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子。
代码如下:
  1. $(function () {
  2.                     var webNav = {
  3.                         val: {
  4.                             target: 0
  5.                         },

  6.                         init: function () {
  7.                             $(".gnb ul li").on("hover", webNav.hover);

  8.                         },

  9.                         hover: function (e) {
  10.                             if ($(this).index() == webNav.val.target) { return };
  11.                             if (e.type == "mouseenter") {
  12.                                 $(this).find("a>p").stop(true, true).animate({ "margin-top": "-70px" }, 300);
  13.                             } else if (e.type == "mouseleave") {
  14.                                 $(this).find("a>p").stop(true, true).animate({ "margin-top": "0px" }, 300);
  15.                             }
  16.                         }
  17.                     };
  18.                     webNav.init();
  19.             
  20.             
  21.             });
复制代码
Demo下载:
附件: 你需要登录才可以下载或查看附件。没有帐号? 注册