先上图:根据鼠标滚动来完成导航的切换
html5代码:
<!DOCTYPE html><html lang="zh-CN">
<meta http-equiv="Content-type" content="text/html" charset="utf-8" >
<head>
<title>获取滚轮次数</title>
<style>
* { margin: 0; padding: 0; }
#nav {
z-index: 100;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 2px solid #0067AC;
border-bottom: 1px solid #999;
}
#nav .width1 {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#nav .sidebar {
float: left;
width: 220px;
height: 55px;
background-image: url(images/cap_07.jpg);
}
#nav ul {
margin-left: 268px;
height: 50px;
overflow: hidden;
border-left: 1px solid #999;
}
#nav ul li {
float: left;
list-style-type: none;
background-image: url(images/cap_09.jpg);
background-position: 0 0;
border-right: 1px solid #ccc;
}
#nav li a {
display: block;
width: 105px;
height: 51px;
line-height: 50px;
text-align: center;
font-weight: 700;
color: #115481;
text-decoration: none;
}
#nav li.navclick a {
background-color: #00A0EA;
}
.box { width: 100%; height: 300px; background-color: #eed; }
</style>
</head>
<body>
<div id="nav">
<div class="width1 height2">
<ul>
<li><a href="#首页">首页</a></li>
<li><a href="#在招职位">新闻</a></li>
<li><a href="#招聘流程">公告</a></li>
<li><a href="#宣讲日期">媒体</a></li>
<li><a href="#公司福利">广告</a></li>
<li><a href="#人文风采">素材</a></li>
<li><a href="#问与答">其他</a></li>
</ul>
</div>
</div>
<div class="box">把鼠标放在这里滚动就能够看到效果 </div>
</body>
<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script/jquery-mousewheel.js"></script>
<script type="text/javascript" src="script/jquery.bgckgroundXY.js"></script>
<script type="text/javascript" src="script/test.js"></script>
</html>
=============================================================================================
test.js代码:
$(function(){
var $nav = $("#nav ul > li");
var len = 0;
var $box = $(".box");
$box.mousewheel(function(y){
len += y;
len2 = -len - 1;
// 浏览器兼容
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
// len2对应的是导航的index
//对应的导航进行切换
//if 判断鼠标的滚轮方向!
//终于完成了!^_^o~ 努力!
if(len2 >= 0 && len2 < 7){
if(y > 0){
$nav.eq(len2).find('a').css('color', '#fff').parent().siblings().find("a").css('color', '#115481');
$nav.eq(len2).stop().animate({backgroundPositionY: '-50px'},100)
.siblings().stop().animate({backgroundPositionY: 0},300);
$('#nav ul > li').removeClass("navclick");
}
if(y < 0){
//alert(len2);
$nav.eq(len2).find('a').css('color', '#fff').parent().siblings().find("a").css('color', '#115481');
$nav.eq(len2).stop().animate({backgroundPositionY: '-50px'},100).siblings().stop().animate({backgroundPositionY: 0},300);
$('#nav ul > li').removeClass("navclick");
}
}else if(len2 >= 7){
if(y < 0){
return len = -6;
}
}else{
if(y > 0){
return len = 0;
}
}
});
});