程序员之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JQuery电梯导航效果

JQuery实现电梯导航效果

 更新时间：2022年07月22日 15:57:35   作者：aiguangyuan  
这篇文章主要为大家详细介绍了JQuery实现电梯导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

本文实例为大家分享了JQuery实现电梯导航效果的具体代码，供大家参考，具体内容如下

分享一个基于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="http://9i0i.com/pic.php?p=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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

相关文章

最新评论

?


http://www.vxiaotou.com