jQuery如何实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
这篇文章主要介绍jQuery如何实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司2013年成立,是专业互联网技术服务公司,拥有项目成都网站建设、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元益阳做网站,已为上家服务,为益阳各地企业和个人服务,联系电话:18980820575
一、手风琴菜单效果图及代码如下:
手风琴效果制作
- 风景图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如何实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站名称:jQuery如何实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
网站路径:http://cdiso.cn/article/jchggi.html