<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>置顶菜单</title> <link href="https://www.jb51.net/css/reset.css" > <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 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="https://www.jb51.net/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> <img src="https://www.jb51.net/images/li02.png" alt="banner图"> </div> <ul> <li><a href="javascript:void(0);" >首页</a></li> <li><a href="javascript:void(0);" >新闻动态</a></li> <li><a href="javascript:void(0);" >产品展示</a></li> <li><a href="javascript:void(0);" >案例分析</a></li> <li><a href="javascript:void(0);" >关注我们</a></li> <li><a href="javascript:void(0);" >联系我们</a></li> </ul> <div></div> <div> <div>网站主内容一</div> <div>网站主内容二</div> <div>网站主内容三一</div> </div> <div></div> <div>回到顶部</div> </body> </html>
四、无缝滚动效果图及代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <link href="https://www.jb51.net/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="https://www.jb51.net/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> <button>向左</button> <button>向右</button> <div> <ul> <li><img src="https://www.jb51.net/images/furit_03.jpg" alt="第一张图片"></li> <li><img src="https://www.jb51.net/images/goods_08.jpg" alt="第二张图片"></li> <li><img src="https://www.jb51.net/images/furit_02.jpg" alt="第三张图片"></li> <li><img src="https://www.jb51.net/images/goods_05.jpg" alt="第四张图片"></li> <li><img src="https://www.jb51.net/images/furit_04.jpg" alt="第五张图片"></li> </ul> </div> </div> </body> </html>
以上菜单涉及到的知识点如下：
四、jQuery
1、slideDown（）向下展示
2、slideUp（）向上卷起
3、slideToggle（）依次展开或卷起某个元素
五、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元素
总结