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="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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external
-
jquery 面包屑导航 具体实现
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>YanCms
-
JQuery 浮动导航栏实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q
-
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
-
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div
-
基于jquery实现导航菜单高亮显示（两种方法）
项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
-
使用jquery库实现电梯导航效果
一般来说,一些大型的电商网站首页,页面内容很多,页面会很长,这时候大部分网站都选择使用电梯导航,使页面跳转到相应位置或者返回顶部. 下面使用jquery库来实现电梯导航 基本思路 电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果. 1.页面滚动到相应的位置,实现电梯导航的显示与隐藏2.页面滚动到相应的位置,电梯导航的按钮添加或者移出相应的类3.点击电梯导航按钮,实现页面的滚动和为按钮添加或者移出相应的类4.点击顶部按钮,返回
-
JQuery实现鼠标滑过显示导航下拉列表
当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="
-
jquery实现点击变换导航样式的方法
本文实例讲述了jquery实现点击变换导航样式的方法.分享给大家供大家参考.具体如下: 这里分享一个导航点击变换样式的代码,近来看到很多网站的导航都是点击后导航样式跟着变化,今天就使用jqurey简单实现这一功能,高手勿喷. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-cha-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
jQuery实现电梯导航模块
本文实例为大家分享了jQuery实现电梯导航模块的具体代码,供大家参考,具体内容如下 功能模块 1.当页面滚动到电器的模块, 显示电梯导航 2.点击电梯导航中的 li, 页面滚动到对应的内容区域 3.为当前点击的 li 添加 current 类 4.页面内容滚动到第几个区域, 左侧的电梯导航自动高亮对应的 li 5.为页面滚动设置节流阀(点击 li 时, 不进行第4步判断) html部分结构 <ul class="sidebar"> <li>手机模块</l