jquery.mousewheel实现整屏翻屏效果

2019-11-20 11:38:33

字体：大中小

来源：转载

供稿：网友

实现整屏上下翻效果：
需加载的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;  });})

上一篇：浅谈javascript的Array.prototype.slice.call

下一篇：浅谈JavaScript超时调用和间歇调用