效果:

利用JQuery动画制作滑动菜单项效果实现步骤及代码


点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字

上移从而替换掉原有的文字。

利用JQuery动画制作滑动菜单项效果实现步骤及代码


原理其实不难无非就是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动画,滑动菜单

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。