jQuery实现楼梯效果

2025-02-28 技术教程

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li{ padding: 0; margin: 0; } li{ list-style: none; } #floorNav{ display: none; position: fixed; top: 100px; left: 50px; width: 32px; border: 1px solid #CECECE; } #floorNav li{ position: relative; width: 32px; height: 32px; border-bottom: 1px solid #CECECE; text-align: center; line-height: 32px; font-size: 12px; } #floorNav span{ display: none; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: red; color: white; } #floorNav li:hover span,#floorNav li.hover span{ display: block; } #floorNav li:last-child{ background: red; color: white; border-bottom: none; } #header,#footer{ width: 1000px; height: 1000px; background: darkgoldenrod; margin: 0 auto; } #content{ } #content li{ width:1000px; height: 600px; margin: 0 auto; font-size: 40px; text-align: center; line-height: 600px; } </style> </head> <body> <div id="floorNav"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></li> <li>3F<span>手机</span></li> <li>4F<span>家电</span></li> <li>5F<span>数码</span></li> <li>6F<span>运动</span></li> <li>7F<span>居家</span></li> <li>8F<span>母婴</span></li> <li>9F<span>食品</span></li> <li>10F<span>图书</span></li> <li>11F<span>服务</span></li> <li>TOP</li> </ul> </div> <div id="header"></div> <div id="content"> <ul> <li >服饰</li> <li >美妆</li> <li >手机</li> <li >家电</li> <li >数码</li> <li >运动</li> <li >居家</li> <li >母婴</li> <li >食品</li> <li >图书</li> <li >服务</li> </ul> </div> <div id="footer"></div> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var flag = true; // 当窗口滚动时 $(window).scroll(function(){ if(flag){ // 定义变量窗口滚动值 var st = $(this).scrollTop(); // 判断 if(st>300){ // 大于300显示导航 $("#floorNav").fadeIn(); }else{ // 否则隐藏导航 $("#floorNav").fadeOut(); } // 遍历li $("#content li").each(function(i){ // 判断 if(st >= $(this).offset().top-$(this).outerHeight()/2){ // 给类名，让li变色 $("#floorNav li").eq(i).addClass("hover").siblings().removeClass("hover"); } }) } }); // 点击非最后一个li $("#floorNav li:not(:last)").click(function(){ flag = false; // 让他变色 $(this).addClass("hover").siblings().removeClass("hover"); // 定义变量查询当前li的角标 var index = $(this).index(); // 让页面动画，卷取值：li*卷曲个数的top，时长800，回调函数 $("body,html").stop().animate({"scrollTop":$("#content li").eq(index).offset().top},800,function(){ flag = true; }); }) // 点击最后一个按钮 $("#floorNav li:last").click(function(){ flag = false; // 页面回到顶部 $("body,html").stop().animate({"scrollTop":0},800,function(){ flag = true; }); // 导航隐藏 $("#floorNav").hide() }) }) </script> -- 人生重要的不是所站的位置，而是所朝的方向 -- -- 中国加油！武汉加油！千锋加油！-- </body></html>