实例详解jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
本文主要介绍了基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动菜单的图文说明，本文效果展示和代码实现给大家介绍的非常详细,需要的朋友可以参考下，希望能帮助到大家。
一、手风琴菜单效果图及代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果制作</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元素前面的兄弟元素，实现点击中间的部分，它前面的兄弟元素也跟着一起向左移动
$(this).prevAll().each(function(){
$(this).animate({left:26*$(this).index()});
});
//右边：获取该li元素后面的兄弟元素，实现点击中间的部分，它后面的兄弟元素也跟着一起向右移动
$(this).nextAll().each(function(){
$(this).animate({left:778+26*$(this).index()});
});
})
})
</script>
</head>
<body>
<p class="con">
<ul class="list_ul">
<li class="list_li">
<span>风景图01</span>
<img src="../images/li01.png" alt="风景图01">
</li>
<li class="list_li">
<span>风景图02</span>
<img src="../images/li02.png" alt="风景图02">
</li>
<li class="list_li">
<span>风景图03</span>
<img src="../images/li03.png" alt="风景图03">
</li>
<li class="list_li">
<span>风景图04</span>
<img src="../images/li04.png" alt="风景图04">
</li>
<li class="list_li">
<span>风景图05</span>
<img src="../images/li05.png" alt="风景图05">
</li>
</ul>
</p>
</body>
</html>二、上卷下拉式（层级）菜单效果图和代码如下：
<!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>苹果</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>置顶菜单</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;/*实现子元素水平方向上平分*/
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 p{
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>
<p class="header">
<img src="../images/li02.png" alt="banner图">
</p>
<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" >首页</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" >产品展示</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" >关注我们</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>
</ul>
<p class="menu_pos"></p>
<p class="con">
<p class="con_header">网站主内容一</p>
<p class="con_center">网站主内容二</p>
<p class="con_footer">网站主内容三一</p>
</p>
<p class="footer"></p>
<p class="top">回到顶部</p>
</body>
</html>四、无缝滚动效果图及代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</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>
<p class="con">
<button class="left">向左</button>
<button class="right">向右</button>
<p 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>
</p>
</p>
</body>
</html>以上菜单涉及到的知识点如下：
四、jQuery
1、slideDown（）向下展示
2、slideUp（）向上卷起
3、slideToggle（）依次展开或卷起某个元素
五、jQuery链式调用
jquery对象的方法在执行完之后返回这个jquery对象，所有的jQuery对象的方法可以连起来写：
$("#p1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")$("#p1").//id位p1的元素
.chlidren("ul") //该元素下的ul子元素
.slideDown("fast") //高度从零到实际高度来显示ul元素
.parent() //跳转到ul的父元素，也就是id为p1的元素
.siblings() //跳转p1元素同级的所有兄弟元素
.chlidren("ul") //查找这些兄弟元素中的ul子元素
.slideUp("fase") //从实际高度变换为零来隐藏ul元素
相关推荐：
Atas ialah kandungan terperinci 实例详解jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
Petua jQuery: Cepat ubah suai teks semua teg pada halaman
Feb 28, 2024 pm 09:06 PM
Tajuk: Petua jQuery: Cepat ubah suai teks semua teg pada halaman Dalam pembangunan web, kita selalunya perlu mengubah suai dan mengendalikan elemen pada halaman. Apabila menggunakan jQuery, kadangkala anda perlu mengubah suai kandungan teks semua teg dalam halaman sekaligus, yang boleh menjimatkan masa dan tenaga. Berikut akan memperkenalkan cara menggunakan jQuery untuk mengubah suai teks semua teg pada halaman dengan cepat, dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan fail perpustakaan jQuery dan memastikan bahawa kod berikut dimasukkan ke dalam halaman: <
Gunakan jQuery untuk mengubah suai kandungan teks semua teg
Feb 28, 2024 pm 05:42 PM
Tajuk: Gunakan jQuery untuk mengubah suai kandungan teks semua teg jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas untuk mengendalikan operasi DOM. Dalam pembangunan web, kita sering menghadapi keperluan untuk mengubah suai kandungan teks tag pautan (tag) pada halaman. Artikel ini akan menerangkan cara menggunakan jQuery untuk mencapai matlamat ini dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman. Tambahkan kod berikut dalam fail HTML:
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
