页面整页滚动翻页效果

先看效果

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>整页滚动demo</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    html,
    body {
      height: 100%;
    }

    body,
    ul,
    li,
    a,
    p,
    div {
      padding: 0px;
      margin: 0px;
      font-size: 14px;
    }

    #wrap {
      overflow: hidden;
      width: 100%;
    }

    #main {
      height: 2944px;
      top: 0;
      position: relative;
    }

    .page {
      width: 100%;
      margin: 0;
    }

    #page1 {
      background: #E4E6CE;
    }

    #page2 {
      background: #6CE26C;
    }

    #page3 {
      background: #BF4938;
    }

    #page4 {
      background: #2932E1;
    }
  </style>

</head>

<body>
  <div id="wrap">
    <div id="main">
      <div id="page1" class="page"></div>
      <div id="page2" class="page"></div>
      <div id="page3" class="page"></div>
      <div id="page4" class="page"></div>
    </div>
  </div>

</body>
<script type="text/javascript">
  var wrap = document.getElementById("wrap");
  var main = document.getElementById("main");
  var hei = document.body.clientHeight;
  wrap.style.height = hei + "px";
  var obj = document.getElementsByTagName("div");
  for (var i = 0; i < obj.length; i++) {
    if (obj[i].className == 'page') {
      obj[i].style.height = hei + "px";
    }
  }
  //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
  var startTime = 0, //翻屏起始时间  
    endTime = 0,
    now = 0;
  //浏览器兼容      
  if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
    document.addEventListener("DOMMouseScroll", scrollFun, false);
  }
  else if (document.addEventListener) {
    document.addEventListener("mousewheel", scrollFun, false);
  }
  else if (document.attachEvent) {
    document.attachEvent("onmousewheel", scrollFun);
  }
  else {
    document.onmousewheel = scrollFun;
  }

  //滚动事件处理函数
  function scrollFun (event) {
    startTime = new Date().getTime();
    var delta = event.detail || (-event.wheelDelta);
    //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
    //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
    if ((endTime - startTime) < -1000) {
      if (delta > 0 && parseInt(main.offsetTop) > -(hei * 3)) {
        //向下滚动
        now = now - hei;
        toPage(now);
      }
      if (delta < 0 && parseInt(main.offsetTop) < 0) {
        //向上滚动
        now = now + hei;
        toPage(now);
      }
      endTime = new Date().getTime();
    }
    else {
      event.preventDefault();
    }
  }
  function toPage (now) {
    $("#main").animate({ top: (now + 'px') }, 1000);     //jquery实现动画效果
    //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果
  }   
</script>
</html>

上一篇：前端选文件夹以及内容

下一篇：批量打印功能预研

Top