成都网站建设设计

将想法与焦点和您一起共享

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

这篇文章主要介绍jQuery如何实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司2013年成立,是专业互联网技术服务公司,拥有项目成都网站建设、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元益阳做网站,已为上家服务,为益阳各地企业和个人服务,联系电话:18980820575

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

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




 
 手风琴效果制作
 
 
 
 


 
  
   
    风景图01
    
   
   
    风景图02
    
   
   
    风景图03
    
   
   
    风景图04
    
   
   
    风景图05
    
   
  
 

二、上卷下拉式(层级)菜单效果图和代码如下:

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




 
 用jQuery中的slideToggle制作菜单
 
 
 
 



 
  水果系列
  
   
  • 苹果
  •    
  • 梨子
  •    
  • 葡萄
  •    
  • 火龙果
  •          海鲜系列   
         
    •    
    • 大虾
    •    
    • 螃蟹
    •    
    • 海带
    •   
          果蔬系列   
         
    • 茄子
    •    
    • 黄瓜
    •    
    • 豆角
    •    
    • 西红柿
    •   
          速冻食品   
         
    • 水饺
    •    
    • 冰淇淋
    •   
          肉质系列   
         
    • 猪肉
    •    
    • 羊肉
    •    
    • 牛肉
    •   
     

    三、置顶菜单(当一个菜单到达页面顶部时,停在那)

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

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

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

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

    
    
    
     
     无缝滚动
     
     
     
     
    
    
    
     向左
     向右
     
      
       
  •    
  •    
  •    
  •    
  •     

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

    四、jQuery

    1、slideDown()向下展示

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

    2、slideUp()向上卷起

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

    3、slideToggle()依次展开或卷起某个元素

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

     五、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://chengdu.cdxwcx.cn/article/jchggi.html