本文主要介紹了基於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元素相關建議:
以上是實例詳解jQuery實現手風琴菜單、層級菜單、置頂菜單、無縫滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!