js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

2019-11-20 10:40:40

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html><html> <head>  <title>wheel</title>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  <script type="text/javascript" >   var currentShowPageIndex = 0;   var animateTimeout = null;   var isWheelAnimating = false;   var isWheelUp = function(event) {    event = event || window.event;    var up = true;    if(event.wheelDelta){//IE/Opera/Chrome     up = event.wheelDelta / 120 == 1 ? true : false;    }else{//Firefox     up = event.detail / 3 == 1 ? true : false;    }    return up;   }   var changeBar = function(prevIndex, index) {    var barUl = document.getElementById('barUl');    var barLiList = barUl.getElementsByTagName('li');    barLiList[prevIndex].className = "";    barLiList[index].className = "active";    }   var changePage = function(pageIndex) {    var showPageUl = document.getElementById('wheelUl');    changeBar(currentShowPageIndex, pageIndex);    currentShowPageIndex = pageIndex;    var left = -(currentShowPageIndex) * 1000;    showPageUl.style.marginLeft = left + "px";    return;   }   var animate = function(obj, mode, from, to){    if(animateTimeout) {     clearTimeout(animateTimeout);    }    if(mode == "left") {     if(from > to) {      from = from - 50;      obj.style.marginLeft = (from) + "px";      setTimeout(function(){       animate(obj, mode, from, to);      }, 30);     } else {        isWheelAnimating = false;       }     return;    }     if(from < to) {     from = from + 50;     obj.style.marginLeft = (from) + "px";     setTimeout(function(){      animate(obj, mode, from, to);     }, 30);    } else {       isWheelAnimating = false;      }   }   var mouseWheel = function(event) {     if(isWheelAnimating) {      return;    }    isWheelAnimating = true;    var wheelUp = isWheelUp(event);    var showPageUl = document.getElementById('wheelUl');    var showPageUlWidth = parseInt(showPageUl.offsetWidth);    var showPageLiList = showPageUl.getElementsByTagName('li');    var showPageLiListLength = showPageLiList.length;    var wheelWrapperLeft = parseInt(document.getElementById('wheelWrapper').offsetLeft);    if(wheelUp && currentShowPageIndex < showPageLiListLength - 1) {     changeBar(currentShowPageIndex, currentShowPageIndex + 1);     currentShowPageIndex ++;     var left = -(currentShowPageIndex) * 1000;     //animate(showPageUl, "right", -(currentShowPageIndex - 1) * 1000, -(currentShowPageIndex - 1) * 1000);     var from = -(currentShowPageIndex - 1) * 1000;     var to = -(currentShowPageIndex) * 1000;     animate(showPageUl, "left", from, to);     return;    }    if(!wheelUp && currentShowPageIndex > 0) {     changeBar(currentShowPageIndex, currentShowPageIndex - 1);     currentShowPageIndex --;     var from = -(currentShowPageIndex + 1) * 1000;     var to = -(currentShowPageIndex) * 1000;     animate(showPageUl, "right", from, to);     return;    }     isWheelAnimating = false;   };   if(document.addEventListener){    document.addEventListener('DOMMouseScroll',function(event) { mouseWheel(event); },false);   }   document.onmousewheel = function(event) { mouseWheel(event); }   window.onload = function(){    var barUl = document.getElementById('barUl');    var barLiList = barUl.getElementsByTagName('li');    for(var i=0,length=barLiList.length; i<length; i++) {     (function(index){      barLiList[index].onclick = function(){       changePage(index);      };     })(i);    }   }  </script>  <style type="text/css" >   body { background:#494949; margin:0; }   ul { list-style:none; margin:0; padding:0; }   li { float:left;}   #wheelWrapper {    width:1000px; height:550px; margin:0 auto;     position:fixed; left:50%; margin-left:-505px;    bottom:50px; overflow:hidden;   }   #wheelUl {    width:5050px; height:500px;   }   #barUl {    clear:both; margin:0 auto; width:550px;    margin-top:20px; line-height:25px;   }   #barUl>li {    width:100px; background:orange;    height:25px; margin-right:10px;    border-radius:5px; text-align:center;    -webkit-border-radius:5px;    -moz-border-radius:5px;   }   #barUl>li:hover {    background:#C36C12;   }   #barUl>li[class=active] {    background:#C36C12;   }   #wheelUl>li { width:1000px; }   .wheel {    width:994px; height:500px; background:#FAAA3C;    border-radius:10px;    -webkit-border-radius:10px;    -moz-border-radius:10px;    margin:0 auto;    line-height:300px;    font-size:100px;    text-align:center;   }   .radius {    border-radius:3px;    -webkit-border-radius:3px;    -moz-border-radius:3px;   }   h1 { text-align:center; color:#fff; }  </style> </head> <body id="body">  <h1 >ie8+,chrome,ff提供支持</h1>  <div id="wrapper">   <div id="wheelWrapper">    <ul id="wheelUl" >     <li >      <div class="wheel">       1_page1      </div>     </li>     <li >      <div class="wheel">       2_page2      </div>     </li>     <li >      <div class="wheel">       3_page3      </div>     </li>     <li >      <div class="wheel">       4_page4      </div>     </li>     <li >      <div class="wheel">       5_page5      </div>     </li>    </ul>    <ul id="barUl">     <li class="active">      1     </li>     <li>      2     </li>     <li>      3     </li>     <li>      4     </li>     <li>      5     </li>    </ul>   </div>  </div> </body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：理解javascript异步编程

下一篇：AngularJS转换响应内容