@jQuery版楼层效果
这是一个基于jQuery的楼层(网站定位导航)效果,啥也不多说直接上源码?
样式代码:
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.floorNav{
width:30px;
height:auto;
border:1px solid #ddd;
position:fixed;
top:150px;
left:50px;
display:none;
}
.floorNav li{
width:30px;
height:30px;
border-bottom:1px solid #ddd;
line-height:30px;
text-align:center;
position:relative;
font-size:12px;
cursor:pointer;
}
.floorNav li span{
width:30px;
height:30px;
background: #f00;
color:#fff;
position:absolute;
left:0;
top:0;
display:none;
}
.floorNav li.hover span{
display:block;
}
.floorNav li.hover span.active{
background: #f00;
color:#fff;
}
.floorNav li span.active{
background: #fff;
color:#f00;
display:block;
}
.floorNav li.last{
background: #f00;
color:#Fff;
border-bottom:none;
}
#header{
width:800px;
height:1000px;
background: #2af;
margin:0 auto;
font-size:50px;
line-height:1000px;
text-align:center;
}
#main .floor{
width:800px;
height:600px;
line-height:600px;
text-align:center;
color:#fff;
margin:0 auto;
font-size:100px;
}
#footer{
width:800px;
height:400px;
background: #f00;
margin:0 auto;
}
</style>
布局结构:
<body>
<!-- 楼层导航 -->
<ul class="floorNav">
<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 class="last">Top</li>
</ul>
<!-- 楼层 -->
<div id="header">头部</div>
<div id="main">
<div class="floor" style="background:#456">服饰</div>
<div class="floor" style="background:#f9e">美妆</div>
<div class="floor" style="background:#e33">运动</div>
<div class="floor" style="background:#ab3">数码</div>
<div class="floor" style="background:#c56">家电</div>
<div class="floor" style="background:#ff3">手机</div>
<div class="floor" style="background:#a2f">居家</div>
<div class="floor" style="background:#b3b">母婴</div>
<div class="floor" style="background:#78c">服务</div>
<div class="floor" style="background:#0fd">零食</div>
<div class="floor" style="background:#0c9">户外</div>
</div>
<div id="footer"></div>
</body>
下面就是重头戏啦!
js逻辑代码:
<script src="这里自己引入在线或本地的jQuery库"></script>
<script>
// 这里是侧边栏的hover效果实现
$('.floorNav li').not(':last').hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
// 这里是点击侧边栏到对应楼侧的效果实现
$('.floorNav li').not(':last').click(function(){
//找点击元素的下标
var $index = $(this).index();
//获取右边对应块距离文档顶部的距离
var $fTop = $(".floor").eq($index).offset().top;
// console.log($fTop);
// 设置文档的滚动高度为对应块句距离文档顶部的距离
$('html,body').stop().animate({"scrollTop":$fTop},1000);
$('.floorNav li').find("span").removeClass("active");
$(this).find('span').addClass('active');
})
// 下面是滚动楼层对应侧边栏加样式的效果
// 获取头部的高度
var $top = $('#header').height();
$(window).scroll(function(){
var arr=[];
var $sTop = $(this).scrollTop();
$('#main .floor').each(function(index,element){
var $height =$(element).offset().top + $(element).height()/2;
if($sTop<$height){
// console.log(index);
arr.push(index);
}
})
// console.log(arr);
var _index = arr[0];
$('.floorNav li').find("span").removeClass("active");
$('.floorNav li').eq(_index).find('span').addClass('active');
if($sTop>=$top){
$('.floorNav').fadeIn();
}else{
$('.floorNav').fadeOut();
}
});
// 这里是返回顶部效果实现
$(".last").click(function(){
$('html,body').animate({"scrollTop":0})
})
</script>
不喜勿喷,欢迎提宝贵意见!谢谢!