Von js implementierter Seiteneffekt beim Scrollen mit dem Mausrad (ähnlich dem standardmäßigen 360-Grad-Effekt beim Scrollen von Seiten)

Von js implementierter Seiteneffekt beim Scrollen mit dem Mausrad (ähnlich dem standardmäßigen 360-Grad-Effekt beim Scrollen von Seiten)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:17:39

Original

1979 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zum Scrollen mit dem Mausrad zum Wechseln von Seiten mithilfe von js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

<!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 &#63; true : false;
    }else{//Firefox
     up = event.detail / 3 == 1 &#63; 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>

Nach dem Login kopieren

Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung gängiger klassischer Spezialeffekte von jQuery“ und „Zusammenfassung der jQuery-Animation und Verwendung von Spezialeffekten"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.