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

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

 
 
 
 
 
 


 

  

   

    风景图01
    
   
   

    风景图02
    
   
   

    风景图03
    
   
   

    风景图04
    
   
   

    风景图05
    
   
  
 

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

 
 
 
 
 
 



 

  水果系列
  

   
苹果
   
梨子
   
葡萄
   
火龙果
  
 
 

  海鲜系列
  

   
鱼
   
大虾
   
螃蟹
   
海带
  
 
 

  果蔬系列
  

   
茄子
   
黄瓜
   
豆角
   
西红柿
  
 
 

  速冻食品
  

   
水饺
   
冰淇淋
  
 
 

  肉质系列
  

   
猪肉
   
羊肉
   
牛肉
  
 

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

 


 
 
 
 
 
 


 

  
 
 

  
首页
  
新闻动态
  
产品展示
  
案例分析
  
关注我们
  
联系我们
 
 

 

  
网站主内容一
  
网站主内容二
  
网站主内容三一
 
 

 
回到顶部

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

 
 
 
 
 
 



 向左
 向右
 

  

   

   

   

   

   

  
 

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

四、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实现手风琴菜单、层级菜单、置顶菜单、无缝滚动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！