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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题手风琴效果制作/title link rel='样式表href='./css/reset.css '样式con { width:908px高度：300 px余量：50px汽车；飞越：隐藏；位置：相对；} .con .list_ul{ } .con . list _ ul li { width:805px高度：300 px位置：绝对；背景# fff}。Li span { width :26 px高度：296 px文本对齐：中心；color : # fffpadding-top :4 px；float:leftcursor:指针；} .Li img { width :777 px高度：300 px右浮动：} .{显示：表格}后的李：clear : both zoom :1 content : " "；} .con . list _ ul Li : th-child(1){ left :0；} .第：个孩子(2){左：801像素；} .con . list _ ul Li : th-child(3){ left :828 px；} .第：个孩子(4个){左：855像素；} .第：个孩子(5个){左：882像素；} .con . list _ ul Li : th-child(1)span { background : rgba(8，201，160，0.49)；} .con . list _ ul Li : th-child(2)span { background : rgba(120，201，66，0.97)；} .con . list _ ul Li : th-child(3)span {背景： RGB(77，114，201)；} .con . list _ ul Li : th-child(4)span {背景： RGB(255，179，18)；} .con . list _ ul Li : th-child(5)span {背景： RGB(201，5，166)；}/样式脚本src='http:/js/jquery-1。12 .4 .量滴js '/script script $(function(){ $(')).list _ Li’).单击(函数(){ //左边$(这个)。制作动画({left:26*$(this)).index()})；//获取该里元素前面的兄弟元素，实现点击中间的部分，它前面的兄弟元素也跟着一起向左移动$(这个)。普雷瓦尔()。每个（函数(){ $(此)).制作动画({left:26*$(this)).index()})；});//右边：获取该里元素后面的兄弟元素，实现点击中间的部分，它后面的兄弟元素也跟着一起向右移动$(这个)。nextAll().每个（函数(){ $(此)).动画({left:778 26*$(this)).index()})；});})})))/脚本/头体div=' con ' ul class=' list _ ul ' Li class=' list _ Li ' span风景图01/span img src='http:/images/li01.png' alt='风景图01/Li Li class=' list _ Li ' span风景图02/span img src='http:/images/li02.png' alt='风景图02' /li li class='list_li' span风景图03/span img src='http:/images/li03.png' alt='风景图03' /li li class='list_li' span风景图04/span img src='http:/images/li04.png' alt='风景图04' /li li class='list_li' span风景图05/span img src='http:/images/li05.png' alt='风景图05' /li /ul /div/body/html二、上卷下拉式（层级)菜单效果图和代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题用jQuery中的滑动切换制作菜单/title link rel='样式表href='./css/reset.css '样式。菜单{ width :200 pxmargin :10 px汽车；} .menu Li { background : # 8731 dcolor : # ffft ext-indent : 16px；页边距-顶部：-1px；光标：指针；} .menulispan { padd :10 px 0；显示：块；边框-底部： 1px实心# F3 F3} .菜单活动。menulispan :悬停{背景： # c 7254 e；} .菜单li ul{显示：无；} .菜单Li ul Li { text-缩进：20 px背景技术# 9a9addborder:1px实心# F3 F3页边距-顶部：-1px；padd :6 px 0；} .菜单李.活动{显示：块；} .菜单Li ul Li :悬停{背景： # 67c 962} .menu _ Li ul { margin-bottom :1 px；}/样式脚本src='http:/js/jquery-1。12 .4 .量滴js '/script script $(function(){ $(')).menu _ lispan’).单击(function(){ $(this)).add CLaSS(' menuaactive ').父项()。兄弟姐妹()。儿童(' span ').移除CLaSS(“菜单活动”)；$(这个)。下一个(' ul ').slide Toggle()；$(这个)。父项()。兄弟姐妹()。儿童(' ul ').向上滑动()；})})))/script/head dyul class=' menu ' id=' menu ' Li class=' menu _ Li ' span class=' menu active '水果系列/span ul class='active' li苹果/li li梨子/li li葡萄/li li火龙果/li /ul /li li class='menu_li' span海鲜系列/span ul li鱼/li li大虾/li li螃蟹/li li海带/li /ul /li li class='menu_li' span果蔬系列/span ul li茄子/li li黄瓜/li li豆角/li li西红柿/li /ul /li li class='menu_li' span速冻食品/span ul li水饺/li li冰淇淋/li /ul /li li class='menu_li' span肉质系列/span ul li猪肉/li li羊肉/li li牛肉/li /ul /li/ul/body/html三、置顶菜单（当一个菜单到达页面顶部时，停在那)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题置顶菜单/title link rel='样式表href='./CSS/重置。CSS ' rel='外部无跟随'样式。标题{宽度：960像素高度：200 pxmargin:0汽车背景# ccc}。标题img { width :100%；高度：200 px} .ul _ list { width:960px高度：50 pxmargin:0汽车文本对齐：中心；display : flex justice-content :空格；/*实现子元素水平方向上平分*/align-items:居中；/*使子元素垂直方向上居中*/后台： # 67c 962} .ul _ list li { width:160px高度：50 px线高： 50pxborder:1px固体# ccc/*使边框合并*/margin-right :-1px；} .ul_list阿利{ color: # fff}。ul _ list Li :悬停{后台： # c 7254 e；} .ul _ fixed { position : fixed top :0 }。菜单_ pos { width:960px高度：50 pxmargin:0汽车线高： 50px显示器：无；} .con div { width:958px高度：300 px线高： 300像素；文本对齐：中心；margin:-1px自动0;border: 1px固体# ccc}。页脚{ height:300px}。顶部{宽度：38像素高度：38 px边框-半径： 35px背景技术： # 000;color : # ffffont-size :13 px；padding:8px文本对齐：中心；位置：固定；右：100 pxbottom :20 pxdisplay :无；} .top:hover{ cursor:指针；}/样式脚本src='http:/js/jquery-1。12 .4 .量滴js '/script script $(function(){ var oLeft=($(document)).outwidth(true)-$(' .标题')。out width())/2；var oTop=$(' .top’)；$(窗口)。滚动（函数(){ if($(window)).scrollTop()=$(' .标题')。outhealth()){ $(' .ul _ list’).addClass('ul_fixed ').CSS({ left : oleft })；$('.menu _ pos’).show()；}else{ $(' .ul _ list’).移除CLaSS(' ul _ fixed ')；$('.menu _ pos’).hide()；} if($(窗口).滚动顶部()=150){ OtoP。FadeIn()；oTop.click(函数(){ //第一种回到顶部的方式//$(窗口)。滚动顶部(0)；//第二种回到顶部的方式（常用)$('html，body ').动画({ scroll top :0 })；})} else { otop。淡出()；} });})/脚本/头体div class=' header ' img src=' http :/images/li02.png' alt='横幅图/div ul class=' ul _ list ' lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '首页/a/Li lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '新闻动态/a/Li lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '产品展示/a/Li lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '案例分析/a/Li lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '关注我们/a/Li lia href=' JavaScript : void(0)；rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '联系我们/a/Li/ul div class=' menu _ pos '/div class=' con ' div class=' con _ header '网站主内容一/div div class='con_center '网站主内容二/div div class='con_footer '网站主内容三一/div/div class='页脚/div div class='顶部'回到顶部/div/body/html四、无缝滚动效果图及代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题无缝滚动/title link rel='样式表href='./css/reset.css '样式con { width :662 pxmargin :50 px汽车；} .con按钮{ width:100px高度：36 px线高： 36px文本对齐：中心；border:无；左边距left:20px}。盒子{ width :655 pxh8 :135 pxmargin 336020 px汽车；border:1px固体# ccc填充-左侧：10 px填充-底部：10像素；相对位置：飞越：隐藏；} .ul _ list { display: flex绝对位置：left :0 to :0 padd : 10px }。ul _ list li { width:120px高度：120 pxborder:1px固体# ccc左边距：-1px；右边距：10 px/*页边距-top :10 px；*/} .ul _ list Li img { width :100%；高度：100 px线高： 100像素；}/样式脚本src='http:/js/jquery-1。12 .4 .量滴js '/script script $(function(){ var OUl=$(').ul _ list’)；var oLeft=$(' .左');var oRight=$(' .右');var left=0；定义变量延迟=2;OUl。html(OUl。html()(OUl。html())；函数move(){ left-=delay；if(left-667){ left=0；} if(left 0){ left=-667；} OUl。CSS({ left : left })；} var timer=setInterval(move，30)；奥立夫特。click(function(){ delay=2；});起源ht。click(function(){ delay=-2；});oUl.children().每个（函数(){ oUl.eq($(this)).index()).鼠标悬停(function(){ clearInterval(timer))；});oUl.eq($(this).index()).鼠标移出(function(){ timer=setInterval(function(){ left-=delay；if(left-667){ left=0；} if(left 0){ left=-667；} OUl。CSS({ left : left })；},30);})})))})/script/head dydiv class=' con ' button class=' left '向左/button button class='right '向右/button div class=' box clear fix ' ul class=' ul _ list ' liimg src=' http :/images/furit_03.jpg' alt='第一张图片/Li Li g src=' http :/images/goods_08.jpg' alt='第二张图片/Li Li g src=' http :/images/furit_02.jpg' alt='第三张图片/Li Li g src=' http :/images/goods_05.jpg' alt='第四张图片/Li Li g src=' http :/images/furit_04.jpg' alt='第五张图片/li /ul /div/div/body/html以上菜单涉及到的知识点如下：

四、jQuery

1、向下滑动()向下展示

2、向上滑动()向上卷起

3、滑动切换()依次展开或卷起某个元素

五、jQuery链式调用

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

$('#div1 ').chlidren('ul ').向下滑动("快速")。父项()。兄弟姐妹()。chlidren('ul ').向上滑动(“fase”)$(“# div 1”).//id位div1的元素。chlidren('ul') //该元素下的保险商实验所子元素。向下滑动("快速")//高度从零到实际高度来显示保险商实验所元素。parent() //跳转到保险商实验所的父元素，也就是编号为div1的元素。兄弟姐妹()//跳转div1元素同级的所有兄弟元素。chlidren('ul') //查找这些兄弟元素中的保险商实验所子元素。向上滑动(' fase') //从实际高度变换为零来隐藏保险商实验所元素

总结

以上所述是小编给大家介绍的基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！