Rumah > hujung hadapan web > tutorial js > 利用JQuery动画制作滑动菜单项效果实现步骤及代码_jquery

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

WBOY
Lepaskan: 2016-05-16 17:41:51
asal
1220 orang telah melayarinya

效果:



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


});
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan