jquery.mousewheel实现整屏翻屏效果

前端技术 2023/09/07 JavaScript

实现整屏上下翻效果：
需加载的js

<script type=\"text/javascript\" src=\"js/jquery-1.8.3.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.mousewheel.js\"></script>

css样式如下：

body{padding:0;margin:0; overflow:hidden }
ul{list-style:none;}
.content{width:100%;height100%;position:relative;top:0;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
.div_01{background: #b20909;}
.div_02{background: #0941b2;}
.div_03{background: #2db209;}
.div_04{background: #b29c09;}
.left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
.left_fixed ul li{
  background:#000;cursor:pointer;width:15px;height: 15px;
  border-radius:15px;margin-bottom: 10px;
}
.left_fixed ul li.active{background:#fff;}

jquery代码如下：

var page=0;//翻屏变量，初始第一屏
var shakStaute = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){
  var starttime = 0,
    endtime = 0;
  $(\"body\").mousewheel(function(event, delta) {
    starttime = new Date().getTime(); //记录翻屏的初始时间
    if (delta < 0&& page>=0 && page<=$(\".content .divsame\").length-2) { 
      if (shakStaute>=0 &&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏
        shakStaute=1;
        page++;
        renderPage(page,true); //翻屏函数
        endtime = new Date().getTime();  //记录翻屏的结束时间
      }
    } else if (delta>0 && page>=1 && shakStaute==1 && (starttime == 0 || (endtime - starttime) <= -500)) {  
      page--;
      renderPage(page,true);
      endtime = new Date().getTime();            
    }  
  });
  var div_height=$(window).height(); 
  $(\".divsame\").css({\'height\':div_height});
  $(window).resize(function(){
    div_height=$(window).height();
    $(\".divsame\").css({\'height\':div_height});
    $(\'.content\').animate({top:-page*div_height }, 100);
  });
  
  $(\".left_fixed ul li\").on(\"click\", function(){ //点击小导航也执行翻屏
    var index = $(this).index();
    if(index>0){
      shakStaute==1;
    }
    page = index;
    renderPage(page, true);
    $(\".left_fixed ul li\").removeClass(\"active\");
    $(this).addClass(\"active\");
    return false;
  });
  function renderPage(pageNumber, isScroll){  
  if (isScroll){
    $(\'.content\').animate({top:-pageNumber*div_height }, \'slow\');
    $(\".left_fixed ul li\").removeClass(\"active\");
    $(\".left_fixed ul li\").eq(pageNumber).addClass(\"active\");
  }   
   return;
}
})

同时也是实时响应的。

再来看一个例子

注意头部加载的js，jquery库，mousewheel.js已经实现的index.js

<!doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title></title>
<meta name=\"keywords\" content=\"\"/>
<meta name=\"description\" content=\"\"/>
<script type=\"text/javascript\" src=\"js/jquery-1.8.3.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.mousewheel.js\"></script>
<script type=\"text/javascript\" src=\"js/index.js\"></script>
<style>
  body{padding:0;margin:0; overflow:hidden }
  ul{list-style:none;}
  .div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
  .div_01{background: #b20909;}
  .div_02{background: #0941b2;}
  .div_03{background: #2db209;}
  .div_04{background: #b29c09;}
  .left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
  .left_fixed ul li{background:#000;cursor:pointer;width:15px;height: 15px;border-radius:15px;margin-bottom: 10px;}
  .left_fixed ul li.active{background:#fff;}
</style>
</head>
<body>
  <div class=\"content\">
    <div class=\"div_01\"></div>
    <div class=\"div_02\"></div>
    <div class=\"div_03\"></div>
    <div class=\"div_04\"></div>
  </div>
  <div class=\"left_fixed\">
    <ul>
      <li class=\"active\"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

jquery 代码如下(index.js)：

var i=0;//翻屏变量，初始第一屏
var s = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象

$(function(){

  var starttime = 0,
    endtime = 0;
  $(\"body\").mousewheel(function(event, delta) {

    starttime = new Date().getTime(); //记录翻屏的初始时间

    if (delta < 0&& i>=0 && i<=2) { 

      if (s>=0&&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏
        s=1;
        i++;
        renderPage(i,true); //翻屏函数
        endtime = new Date().getTime(); //记录翻屏的结束时间
      }
    } else if (delta > 0&& i>=1&&s==1&& (starttime == 0 || (endtime - starttime) <= -500)) {  
      i--;
      //console.log(i);
      renderPage(i,true);
      endtime = new Date().getTime();           
    }  

  });

  var div_height=$(window).height(); 

  $(\".div_01,.div_02,.div_03,.div_04\").css({\'height\':div_height});

  $(window).resize(function(){

  var div_height=$(window).height();

  $(\".div_01,.div_02,.div_03,.div_04\").css({\'height\':div_height});

  });

  function renderPage(pageNumber, isScroll){ 
    if (isScroll){
        $(\'body, html\').animate({scrollTop:pageNumber*div_height }, \'slow\');
        $(\".left_fixed ul li\").removeClass(\"active\");
        $(\".left_fixed ul li\").eq(pageNumber).addClass(\"active\");
      }

     return;
    }

  $(\".left_fixed ul li\").on(\"click\", function(){ //点击小导航也执行翻屏
    var index = $(this).index();
    renderPage(index, true);
    $(\".left_fixed ul li\").removeClass(\"active\");
    $(this).addClass(\"active\");
    return false;
  });
})

本文地址：https://www.stayed.cn/item/19244

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案