基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級(jí)菜單、置頂菜單、無(wú)縫滾動(dòng)效果
更新時(shí)間：2017年07月20日 08:41:01 作者：小君君的博客
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級(jí)菜單、置頂菜單、無(wú)縫滾動(dòng)菜單的圖文說(shuō)明，本文效果展示和代碼實(shí)現(xiàn)給大家介紹的非常詳細(xì),需要的朋友可以參考下
一、手風(fēng)琴菜單效果圖及代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手風(fēng)琴效果制作</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:908px;
height:300px;
margin:50px auto;
overflow: hidden;
position:relative;
}
.con .list_ul{
}
.con .list_ul li{
width:805px;
height:300px;
position:absolute;
background:#fff;
}
.con .list_ul li span{
width:26px;
height:296px;
text-align: center;
color:#fff;
padding-top:4px;
float:left;
cursor: pointer;
}
.con .list_ul li img{
width:777px;
height:300px;
float:right;
}
.con .list_ul li:after{
display: table;
clear:both;
zoom:1;
content: '';
}
.con .list_ul li:nth-child(1){
left:0;
}
.con .list_ul li:nth-child(2){
left:801px;
}
.con .list_ul li:nth-child(3){
left:828px;
}
.con .list_ul li:nth-child(4){
left:855px;
}
.con .list_ul li:nth-child(5){
left:882px;
}
.con .list_ul li:nth-child(1) span{
background: rgba(8, 201, 160, 0.49);
}
.con .list_ul li:nth-child(2) span{
background: rgba(120, 201, 66, 0.97);
}
.con .list_ul li:nth-child(3) span{
background: rgb(77, 114, 201);
}
.con .list_ul li:nth-child(4) span{
background: rgb(255, 179, 18);
}
.con .list_ul li:nth-child(5) span{
background: rgb(201, 5, 166);
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$(".list_li").click(function(){
//左邊
$(this).animate({left:26*$(this).index()});
//獲取該li元素前面的兄弟元素，實(shí)現(xiàn)點(diǎn)擊中間的部分，它前面的兄弟元素也跟著一起向左移動(dòng)
$(this).prevAll().each(function(){
$(this).animate({left:26*$(this).index()});
});
//右邊：獲取該li元素后面的兄弟元素，實(shí)現(xiàn)點(diǎn)擊中間的部分，它后面的兄弟元素也跟著一起向右移動(dòng)
$(this).nextAll().each(function(){
$(this).animate({left:778+26*$(this).index()});
});
})
})
</script>
</head>
<body>
<div class="con">
<ul class="list_ul">
<li class="list_li">
<span>風(fēng)景圖01</span>
<img src="../images/li01.png" alt="風(fēng)景圖01">
</li>
<li class="list_li">
<span>風(fēng)景圖02</span>
<img src="../images/li02.png" alt="風(fēng)景圖02">
</li>
<li class="list_li">
<span>風(fēng)景圖03</span>
<img src="../images/li03.png" alt="風(fēng)景圖03">
</li>
<li class="list_li">
<span>風(fēng)景圖04</span>
<img src="../images/li04.png" alt="風(fēng)景圖04">
</li>
<li class="list_li">
<span>風(fēng)景圖05</span>
<img src="../images/li05.png" alt="風(fēng)景圖05">
</li>
</ul>
</div>
</body>
</html>
二、上卷下拉式（層級(jí)）菜單效果圖和代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用jQuery中的slideToggle制作菜單</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.menu{
width:200px;
margin:10px auto;
}
.menu>li{
background: #8731dd;
color:#fff;
text-indent: 16px;
margin-top:-1px;
cursor: pointer;
}
.menu>li>span{
padding:10px 0;
display:block;
border-bottom: 1px solid #f3f3f3;
}
.menuactive,.menu>li>span:hover{
background:#c7254e;
}
.menu > li ul{
display: none;
}
.menu > li ul li{
text-indent:20px;
background: #9a9add;
border:1px solid #f3f3f3;
margin-top:-1px;
padding:6px 0;
}
.menu >li .active{
display: block;
}
.menu > li ul li:hover{
background:#67C962;
}
.menu_li ul{
margin-bottom:1px;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$(".menu_li>span").click(function(){
$(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive");
$(this).next("ul").slideToggle();
$(this).parent().siblings().children("ul").slideUp();
})
})
</script>
</head>
<body>
<ul class="menu" id="menu">
<li class="menu_li">
<span class="menuactive">水果系列</span>
<ul class="active">
<li>蘋(píng)果</li>
<li>梨子</li>
<li>葡萄</li>
<li>火龍果</li>
</ul>
</li>
<li class="menu_li">
<span>海鮮系列</span>
<ul>
<li>魚(yú)</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>肉質(zhì)系列</span>
<ul>
<li>豬肉</li>
<li>羊肉</li>
<li>牛肉</li>
</ul>
</li>
</ul>
</body>
</html>
三、置頂菜單（當(dāng)一個(gè)菜單到達(dá)頁(yè)面頂部時(shí)，停在那）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置頂菜單</title>
<link rel="stylesheet" href="../css/reset.css" rel="external nofollow" >
<style>
.header{
width:960px;
height:200px;
margin:0 auto;
background: #ccc;
}
.header img{
width:100%;
height:200px;
}
.ul_list{
width:960px;
height:50px;
margin:0 auto;
text-align: center;
display: flex;
justify-content: space-between;/*實(shí)現(xiàn)子元素水平方向上平分*/
align-items: center;/*使子元素垂直方向上居中*/
background: #67C962;
}
.ul_list li{
width:160px;
height:50px;
line-height: 50px;
border:1px solid #ccc;
/*使邊框合并*/
margin-right:-1px;
}
.ul_list li a{
color:#fff;
}
.ul_list li:hover{
background: #c7254e;
}
.ul_fixed{
position: fixed;
top:0;
}
.menu_pos{
width:960px;
height:50px;
margin:0 auto;
line-height: 50px;
display: none;
}
.con div{
width:958px;
height:300px;
line-height: 300px;
text-align: center;
margin:-1px auto 0;
border: 1px solid #ccc;
}
.footer{
height:300px;
}
.top{
width:38px;
height:38px;
border-radius: 35px;
background: #000;
color:#fff;
font-size:13px;
padding:8px;
text-align: center;
position: fixed;
right:100px;
bottom:20px;
display: none;
}
.top:hover{
cursor: pointer;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var oLeft = ($(document).outerWidth(true)-$(".header").outerWidth())/2;
var oTop = $(".top");
$(window).scroll(function(){
if($(window).scrollTop() >= $(".header").outerHeight()){
$(".ul_list").addClass("ul_fixed").css({left:oLeft});
$(".menu_pos").show();
}else{
$(".ul_list").removeClass("ul_fixed");
$(".menu_pos").hide();
}
if($(window).scrollTop() >= 150){
oTop.fadeIn();
oTop.click(function(){
//第一種回到頂部的方式
//$(window).scrollTop(0);
//第二種回到頂部的方式(常用)
$("html,body").animate({scrollTop:0});
})
}else{
oTop.fadeOut();
}
});
})
</script>
</head>
<body>
<div class="header">
<img src="../images/li02.png" alt="banner圖">
</div>
<ul class="ul_list">
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新聞動(dòng)態(tài)</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >產(chǎn)品展示</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例分析</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >關(guān)注我們</a></li>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >聯(lián)系我們</a></li>
</ul>
<div class="menu_pos"></div>
<div class="con">
<div class="con_header">網(wǎng)站主內(nèi)容一</div>
<div class="con_center">網(wǎng)站主內(nèi)容二</div>
<div class="con_footer">網(wǎng)站主內(nèi)容三一</div>
</div>
<div class="footer"></div>
<div class="top">回到頂部</div>
</body>
</html>
四、無(wú)縫滾動(dòng)效果圖及代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無(wú)縫滾動(dòng)</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:662px;
margin:50px auto;
}
.con button{
width:100px;
height:36px;
line-height: 36px;
text-align: center;
border: none;
margin-left:20px;
}
.box{
width:655px;
height:135px;
margin:20px auto;
border:1px solid #ccc;
padding-left:10px;
padding-bottom:10px;
position: relative;
overflow: hidden;
}
.ul_list{
display: flex;
position: absolute;
left:0;
top:0;
padding: 10px;
}
.ul_list li{
width:120px;
height:120px;
border:1px solid #ccc;
margin-left:-1px;
margin-right:10px;
/*margin-top:10px;*/
}
.ul_list li img{
width:100%;
height:100px;
line-height: 100px;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var oUl = $(".ul_list");
var oLeft = $(".left");
var oRight = $(".right");
var left = 0;
var delay = 2;
oUl.html(oUl.html()+oUl.html());
function move(){
left-=delay;
if(left<-667){
left = 0;
}
if(left>0){
left = -667;
}
oUl.css({left:left});
}
var timer =setInterval(move,30);
oLeft.click(function(){
delay =2;
});
oRight.click(function(){
delay = -2;
});
oUl.children().each(function(){
oUl.eq($(this).index()).mouseover(function(){
clearInterval(timer);
});
oUl.eq($(this).index()).mouseout(function(){
timer= setInterval(function(){
left-=delay;
if(left<-667){
left = 0;
}
if(left>0){
left = -667;
}
oUl.css({left:left});
},30);
})
})
})
</script>
</head>
<body>
<div class="con">
<button class="left">向左</button>
<button class="right">向右</button>
<div class="box clearfix">
<ul class="ul_list">
<li><img src="../images/furit_03.jpg" alt="第一張圖片"></li>
<li><img src="../images/goods_08.jpg" alt="第二張圖片"></li>
<li><img src="../images/furit_02.jpg" alt="第三張圖片"></li>
<li><img src="../images/goods_05.jpg" alt="第四張圖片"></li>
<li><img src="../images/furit_04.jpg" alt="第五張圖片"></li>
</ul>
</div>
</div>
</body>
</html>
以上菜單涉及到的知識(shí)點(diǎn)如下：
四、jQuery
1、slideDown（）向下展示
2、slideUp（）向上卷起
3、slideToggle（）依次展開(kāi)或卷起某個(gè)元素
五、jQuery鏈?zhǔn)秸{(diào)用
jquery對(duì)象的方法在執(zhí)行完之后返回這個(gè)jquery對(duì)象，所有的jQuery對(duì)象的方法可以連起來(lái)寫(xiě)：
$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")
$("#div1").//id位div1的元素
.chlidren("ul") //該元素下的ul子元素
.slideDown("fast") //高度從零到實(shí)際高度來(lái)顯示ul元素
.parent() //跳轉(zhuǎn)到ul的父元素，也就是id為div1的元素
.siblings() //跳轉(zhuǎn)div1元素同級(jí)的所有兄弟元素
.chlidren("ul") //查找這些兄弟元素中的ul子元素
.slideUp("fase") //從實(shí)際高度變換為零來(lái)隱藏ul元素
總結(jié)
以上所述是小編給大家介紹的基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級(jí)菜單、置頂菜單、無(wú)縫滾動(dòng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
- jQuery多級(jí)手風(fēng)琴菜單實(shí)例講解
- 基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開(kāi)和折疊導(dǎo)航菜單
- 基于JQuery的一句話搞定手風(fēng)琴菜單
- jquery實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴菜單效果實(shí)例
- jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果
- Jquery 垂直多級(jí)手風(fēng)琴菜單附源碼下載
- jQuery插件實(shí)現(xiàn)手風(fēng)琴二級(jí)菜單
相關(guān)文章
jquery動(dòng)態(tài)添加元素事件失效問(wèn)題解決方法
當(dāng)使用腳本動(dòng)態(tài)添加元素xxx時(shí)，但事件失效，最后使用jquery中on方法解決腳本動(dòng)態(tài)添加元素,需要的朋友可以參考下2014-05-05
jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
本文給大家分享的是使用jQuery的masonry庫(kù)和infinitescroll庫(kù)實(shí)現(xiàn)的瀑布流美女圖片展示的實(shí)例，效果非常不錯(cuò)，這里推薦給大家，有需要的小火把可以參考下。2015-04-04
這篇文章主要介紹了jQuery中html()方法用法,以實(shí)例形式分析了html()方法的功能、定義及使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
本文是對(duì)jquery.validate的使用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
網(wǎng)上查了好多用著都不行，自己搞定了：在包含iframe的頁(yè)面中加入以下腳本，基本思想是在iframe加載內(nèi)容后重新設(shè)置高度，下面代碼盡在IE6中用過(guò)，沒(méi)在其他瀏覽器中測(cè)試。2009-12-12
jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
PageSwitch插件實(shí)現(xiàn)100種不同圖片切換效果
這篇文章主要介紹了PageSwitch插件實(shí)現(xiàn)100種不同圖片切換效果,需要的朋友可以參考下2015-07-07
本文主要介紹了jquery實(shí)現(xiàn)頁(yè)面加載效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效
本文給大家分享的是一款jQuery整屏（全屏）滾動(dòng)插件網(wǎng)頁(yè)特效，滾動(dòng)鼠標(biāo)滾輪整屏一屏滾動(dòng)切換代碼，可設(shè)置文字/圖片絕對(duì)上下左右居中顯示JS代碼，時(shí)下最流行的jQuery全屏滾動(dòng)插件！（兼容測(cè)試：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器）2015-04-04