本文分享一个基于JQuery实现的电梯导航效果,效果如下:
以下是代码实现:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'microsoft yahei'; } #loutinav { width: 35px; position: fixed; top: 100px; left: 50px; border: 1px solid #ddd; display: none; } #loutinav ul li { width: 35px; height: 32px; border-bottom: 1px dotted #DDDDDD; list-style: none; font-size: 12px; text-align: center; position: relative; cursor: pointer; padding: 10px 0; background: #918888; color: #fff; } #loutinav ul li span { width: 35px; height: 32px; padding: 10px 0; position: absolute; top: 0; left: 0; } #loutinav ul li.last { background: #5e4a4a; color: #fff; border-bottom: 1px solid #ddd; } #loutinav ul li.active span { background: #c00; color: #fff; display: block; } #loutinav ul li:hover span { background: #c00; color: #fff; display: block; } #header { width: 1000px; height: 1000px; background: #cc6633; margin: 0 auto; font-size: 50px; line-height: 1000px; text-align: center; color: #000; } #main { width: 1000px; background: #66ff66; margin: 0 auto; } #main .louti { height: 600px; width: 1000px; font-size: 50px; color: #fff; font-weight: bold; text-align: center; line-height: 600px; } #footer { width: 1000px; height: 400px; background: red; margin: 0 auto; font-size: 50px; line-height: 400px; text-align: center; color: #000; } </style> </head> <body> <div id="loutinav"> <ul> <li class="active"> <span>享品质</span> </li> <li> <span>服饰美妆</span> </li> <li> <span>电脑数码</span> </li> <li> <span>3C运动</span> </li> <li> <span>爱吃</span> </li> <li> <span>母婴居家</span> </li> <li> <span>图书汽车</span> </li> <li> <span>虚拟</span> </li> <li> <span>还没逛够</span> </li> <li class="last">顶部</li> </ul> </div> <div id="header"> 向下滚动鼠标查看效果 </div> <div id="main"> <div class="louti" style="background: #cc0033;"> 享品质 </div> <div class="louti" style="background: #999933;"> 服饰美妆 </div> <div class="louti" style="background: #ccff33;"> 电脑数码 </div> <div class="louti" style="background: #006633;"> 3C运动 </div> <div class="louti" style="background: #6666cc;"> 爱吃 </div> <div class="louti" style="background: #ff6600;"> 母婴居家 </div> <div class="louti" style="background: #ffff00;"> 图书汽车 </div> <div class="louti" style="background: #3333ff;"> 虚拟 </div> <div class="louti" style="background: #ff00cc;"> 还没逛够 </div> </div> <div id="footer"> 网站底部 </div> <script src="https://www.atool.online/article/js/jquery-1.8.3.min.js"></script> <script> $(function () { $(window).on('scroll', function () { var $scroll = $(this).scrollTop(); // 显示楼层标签 if ($scroll >= 800) { $('#loutinav').show(); } else { $('#loutinav').hide(); } // 拖动滚轮,点亮对应的楼层标签 $('.louti').each(function () { var $loutitop = $('.louti').eq($(this).index()).offset().top + 400; // 楼层的top大于滚动条的距离 if ($loutitop > $scroll) { $('#loutinav li').removeClass('active'); $('#loutinav li').eq($(this).index()).addClass('active'); // 中断循环 return false; } }); }); // 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置 var $loutili = $('#loutinav li').not('.last'); $loutili.on('click', function () { $(this).addClass('active').siblings('li').removeClass('active'); var $loutitop = $('.louti').eq($(this).index()).offset().top; // 获取每个楼梯的offsetTop值 // $('html,body')兼容问题body属于chrome $('html,body').animate({ scrollTop: $loutitop }) }); // 回到顶部 $('.last').on('click', function () { // $('html,body')兼容问题body属于chrome $('html,body').animate({ scrollTop: 0 }) }); }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。