mousewheel鼠标滚轮运用于导航栏

最新推荐文章于 2020-04-26 15:48:26 发布

lianxiaokeii

最新推荐文章于 2020-04-26 15:48:26 发布

阅读量617

点赞数

分类专栏： jQuery 文章标签：鼠标滚轮滚轮实现导航切换

本文链接：https://blog.csdn.net/lianxiaokeii/article/details/46491071

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先上图：根据鼠标滚动来完成导航的切换

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;
           }
       }

   });
});