标签：楼层导航效果
很多电商网站都使用楼层导航效果来布局，如京东，唯品会等大型网站。那楼层导航效果怎么写了，其实很简单，主要用到鼠标滚动事件和高度的应用。现在我们就来用jquery来写以下。代码是直接copy过来的，因为注释比较多所以看起来有点乱。感兴趣的同学可以下载下面的源码来学习。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼层导航3</title>
<style>
*{margin: 0;padding: 0;}
#container{width: 900px;margin: 0 auto;}
#container>*{width: 100%;}
.header{height: 2000px;background: red;}
.floor{height: 1000px;font:bold 25px/30px "微软雅黑";}
.footer{height: 500px;background: red;}
#nav{width: 100px;position: fixed;left: 20px;bottom:300px;list-style: none;display: none;cursor: pointer;}
#nav li{height: 35px;line-height: 35px;border-bottom: 1px dashed #ccc;text-align: center;position: relative;font-size: 25px;margin-top: 1px;}
#nav li span{position: absolute;display: inline-block;height: 35px;line-height: 35px;width: 100%;text-align: center;left: 0;top: 0;display: none;background: #f00;color: #fff;}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
var winHeight = $(window).height(), //获取浏览器可是窗口的盖度
headerHeight = $(‘.header‘).height(), //获取header的高度
onOff = false; //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动
$(window).on(‘scroll‘,function(){
var scTop = $(window).scrollTop(); //获取滚动条的滚动距离
//当楼侧开始出现时显示楼层导航条
if(scTop >= headerHeight - winHeight){
$(‘#nav‘).show(400); //也可以不传参数，传参数表示运动时间
}else{
$(‘#nav‘).hide(400);
}
//滚动时切换显示楼层
if(!onOff){
$(‘.floor‘).each(function(index,element){
var _top = $(this).offset().top;
//当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示
if(scTop >= _top - winHeight / 2){
//此处添加curr类样式并不是改变显示样式，而是为了标当前所在的楼层
$(‘#nav>li‘).eq(index).addClass(‘curr‘).children().show()
.end().siblings().removeClass(‘curr‘).children().hide();
}
});
}
})
$(‘#nav>li‘).hover(function(){
$(this).children().show();
},function(){
//此处用到.not(‘.curr‘)来过滤当前楼层，鼠标移开时仍然保持当前的显示样式
$(this).not(‘.curr‘).children().hide();
}).on(‘click‘,function(){
onOff = true; //将开关变量onOff置为true
var index = $(this).index(), //获取当前电机的li的索引
_top = $(‘.floor‘).eq(index).offset().top;//获取相对于的楼层到文档顶部的距离
$(this).addClass(‘curr‘).children().show().end()
.siblings().removeClass(‘curr‘).children().hide();
$(‘html,body‘).animate({‘scrollTop‘:_top},400,function(){
onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false
});
//或者也可以用scrollIntoView()方法，只是该方法没有滚动的效果，而是直接跳到浏览器可是窗口的最上面.用法如下：
/*var index = $(this).index();
$(‘.floor‘).get(index).scrollIntoView();*/
});
});
</script>
</head>
<body>
<div id="container">
<div class="header">header</div>
<div class="main">
<div class="floor" style="background: palegreen;">1F</div>
<div class="floor" style="background: yellow;">2F</div>
<div class="floor" style="background: blueviolet;">3F</div>
<div class="floor" style="background: orange;">4F</div>
<div class="floor" style="background: greenyellow;">5F</div>
<div class="floor" style="background: bisque;">6F</div>
<div class="floor" style="background: pink;">7F</div>
</div>
<div class="footer">footer</div>
</div>
<div>
<ul id="nav">
<li>1F<span style="display: inline-block;" class="curr">1楼</span></li>
<li>2F<span>2楼</span></li>
<li>3F<span>3楼</span></li>
<li>4F<span>4楼</span></li>
<li>5F<span>5楼</span></li>
<li>6F<span>6楼</span></li>
<li>7F<span>7楼</span></li>
</ul>
</div>
</body>
</html>
本文出自 “11996687” 博客，请务必保留此出处http://12006687.blog.51cto.com/11996687/1862373
标签：楼层导航效果
原文地址：http://12006687.blog.51cto.com/11996687/1862373
