随鼠标轮动翻动层————jquery小练习

闲来无事在网站上看见一个网页制作的不错，就仿照做来看看。特此记录下来。

亮点：随鼠标上下滚动，展示页面随之不同，翻动效果。

功能点：鼠标向上，向下判断事件。

css 代码

html {
       overflow-y: hidden;
   }
 
   .hide {
       display: none;
   }
 
   .show {
       display: block;
   }
 
   .box {
       height: 650px;
       width: 100%;
   }
 
   .foot {
       position: fixed;
       height: 100px;
       top: 150px;
       right: 0px;
   }
 
   ul li a:link {
       text-decoration: none;
       color:gold;
        
   }
 
 
 
   .foot ul li {
       display: block;
       width: 50px;
       height: 30px;
       border: solid 1px white;
       padding: 5px;
       text-align: center;
       vertical-align: middle;
       line-height: 30px;
       cursor: pointer;
   }
 
   .active {
       color: white;
   }
 
   #red {
       background-color: brown;
   }
 
   #orange {
       background-color: burlywood;
   }
 
   #yellow {
       background-color: yellow;
   }
 
   #green {
       background-color: green;
   }
 
   #blueness {
       background-color: chartreuse;
   }
 
   #blue {
       background-color: blue;
   }
 
   #purple {
       background-color: darkmagenta;
   }

　　js 代码

var index1 = 0;
      var scrollFunc = function (e) {
          e = e || window.event;
          if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
              if (e.wheelDelta > 0) { //当滑轮向上滚动时
                  //alert("滑轮向上滚动");
                  index1 = $("ul li a[class=active]").parent().index();
                 
                  console.log(index1);
                  sliderIndex(index1, 0);
              }
              else { //当滑轮向下滚动时
                  //alert("滑轮向下滚动");
                  index1 = $("ul li a[class=active]").parent().index();
                  console.log(index1);
                  sliderIndex(index1, 1);
              }
          }
          //} else if (e.detail) {  //Firefox滑轮事件
          //    if (e.detail > 0) { //当滑轮向上滚动时
          //        alert("滑轮向上滚动");
          //    }
          //    if (e.detail < 0) { //当滑轮向下滚动时
          //        alert("滑轮向下滚动");
          //    }
          //}
      }
      //给页面绑定滑轮滚动事件
      //if (document.addEventListener) {//firefox
      //    document.addEventListener('DOMMouseScroll', scrollFunc, false);
      //}
      //滚动滑轮触发scrollFunc方法  //ie 谷歌
      window.onmousewheel = scrollFunc;
 
      function sliderIndex(index, type) {
          if (index == 0 && type == 0) {
              alert("到顶了！");
          }
          else if (index >= 0) { 
 
              var num = 0;
              if (type == 0) {
                  num = index - 1;
              }
              else {
                  num = index + 1;
              }
              if (num == 7)
                  num = 0;
 
              $(".foot ul li a").removeClass("active");
              $(".foot ul li a:eq(" + num + ")").addClass("active");
 
              if (type==0)
              {
                  $("#main div:eq(" + num + ")").slideDown("slow");
              }
              else
               $("#main div:eq(" + index + ")").slideUp("slow");
 
          }
      }
      $(function () {
          $(".foot ul li a").click(function () { 
              $(".foot ul li a").removeClass("active");
              $(this).addClass("active");
              var box = $(this).attr("data-id");
              console.log(box);
              $("#" + box).slideUp("slow");
 
          })
 
      })

html 代码

<div id="main">
       <div id="red" class="box"></div>
       <div id="orange" class="box"> </div>
       <div id="yellow" class="box"></div>
       <div id="green" class="box"> </div>
       <div id="blueness" class="box"></div>
       <div id="blue" class="box"> </div>
       <div id="purple" class="box"></div>
   </div>
   <div class="foot">
       <ul>
           <li data-id="red"> <a href="#red" class="active">赤</a> </li>
           <li data-id="orange"> <a href="#orange">橙 </a></li>
           <li data-id="yellow"> <a href="#yellow">黄</a> </li>
           <li data-id="green"> <a href="#green">绿</a> </li>
           <li data-id="blueness"> <a href="#blueness">青</a> </li>
           <li data-id="blue"> <a href="#blue">蓝</a> </li>
           <li data-id="purple"> <a href="#purple">紫</a></li>
       </ul>
   </div>