基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

这篇文章主要介绍了基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动菜单的图文说明，本文效果展示和代码实现给大家介绍的非常详细,需要的朋友可以参考下

一、手风琴菜单效果图及代码如下：

   手风琴效果制作    风景图01
 风景图02
 风景图03
 风景图04
 风景图05

二、上卷下拉式（层级）菜单效果图和代码如下：

   用jQuery中的slideToggle制作菜单   水果系列 苹果
梨子
葡萄
火龙果
 海鲜系列 鱼
大虾
螃蟹
海带
 果蔬系列 茄子
黄瓜
豆角
西红柿
 速冻食品 水饺
冰淇淋
 肉质系列 猪肉
羊肉
牛肉

三、置顶菜单（当一个菜单到达页面顶部时，停在那）

   置顶菜单  
 首页
新闻动态
产品展示
案例分析
关注我们
联系我们
 网站主内容一
网站主内容二
网站主内容三一
回到顶部

四、无缝滚动效果图及代码如下：

   无缝滚动

以上菜单涉及到的知识点如下：

四、jQuery

1、slideDown（）向下展示

2、slideUp（）向上卷起

3、slideToggle（）依次展开或卷起某个元素

五、jQuery链式调用

jquery对象的方法在执行完之后返回这个jquery对象，所有的jQuery对象的方法可以连起来写：

 $("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

$("#div1").//id位div1的元素

.chlidren("ul") //该元素下的ul子元素

.slideDown("fast") //高度从零到实际高度来显示ul元素

.parent() //跳转到ul的父元素，也就是id为div1的元素

.siblings() //跳转div1元素同级的所有兄弟元素

.chlidren("ul") //查找这些兄弟元素中的ul子元素

.slideUp("fase") //从实际高度变换为零来隐藏ul元素

总结

以上就是基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果的详细内容，更多请关注0133技术站其它相关文章！