发布于 2017-04-24 21:58:08 | 123 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文

效果：

点击第二个菜单项后出现一个向上滑动的动画，控制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(); 


});