- 时间：2020-09-26 22:46 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：利用JQuery动画制作滑动菜单项效果实现步骤及代码
效果：
[img]http://files.jb51.net/file_images/article/201302/201302070858502.jpg[/img]
点击第二个菜单项后出现一个向上滑动的动画，控制margin-top底部另一个div中的文字
上移从而替换掉原有的文字。
[img]http://files.jb51.net/file_images/article/201302/201302070858503.jpg[/img]
原理其实不难无非就是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();
});
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
