html5整屏网页滚动切换特效

html5整屏网页滚动切换特效

特效描述：html5 整屏网页 滚动切换特效，html5整屏切换特效

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. 引入JS

2. HTML代码

<div class="wrapper active-page4">  <div class="page page1">      <h2>          First page</h2>  </div>  <div class="page page2">      <h2>          Second page</h2>  </div>  <div class="page page3">      <h2>          Third page</h2>  </div>  <div class="page page4">      <h2>          Fourth page</h2>  </div>  </div>  <div class="nav-panel">  <div class="scroll-btn up">  </div>  <div class="scroll-btn down">  </div>  <nav>      <ul>          <li data-target="1" class="nav-btn nav-page1"></li>          <li data-target="2" class="nav-btn nav-page2"></li>          <li data-target="3" class="nav-btn nav-page3"></li>          <li data-target="4" class="nav-btn nav-page4 active"></li>      </ul>  </nav>  </div>  <script type="text/javascript">        'use strict';  $(document).ready(function () {      var $wrap = $(".wrapper"),  pages = $(".page").length,  scrolling = false,  currentPage = 1,  $navPanel = $(".nav-panel"),  $scrollBtn = $(".scroll-btn"),  $navBtn = $(".nav-btn");      /*****************************      ***** NAVIGATE FUNCTIONS *****      *****************************/      function manageClasses() {          $wrap.removeClass(function (index, css) {              return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');          });          $wrap.addClass("active-page" + currentPage);          $navBtn.removeClass("active");          $(".nav-btn.nav-page" + currentPage).addClass("active");          $navPanel.addClass("invisible");          scrolling = true;          setTimeout(function () {              $navPanel.removeClass("invisible");              scrolling = false;          }, 1000);      }      function navigateUp() {          if (currentPage > 1) {              currentPage--;              if (Modernizr.csstransforms) {                  manageClasses();              } else {                  $wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);              }          }      }      function navigateDown() {          if (currentPage < pages) {              currentPage++;              if (Modernizr.csstransforms) {                  manageClasses();              } else {                  $wrap.animate({ "top": "-" + ((currentPage - 1) * 100) + "%" }, 1000);              }          }      }      /*********************      ***** MOUSEWHEEL *****      *********************/      $(document).on("mousewheel DOMMouseScroll", function (e) {          if (!scrolling) {              if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {                  navigateUp();              } else {                  navigateDown();              }          }      });      /**************************      ***** RIGHT NAVIGATION ****      **************************/      /* NAV UP/DOWN BTN PAGE NAVIGATION */      $(document).on("click", ".scroll-btn", function () {          if ($(this).hasClass("up")) {              navigateUp();          } else {              navigateDown();          }      });      /* NAV CIRCLE DIRECT PAGE BTN */      $(document).on("click", ".nav-btn", function () {          if (!scrolling) {              var target = $(this).attr("data-target");              if (Modernizr.csstransforms) {                  $wrap.removeClass(function (index, css) {                      return (css.match(/(^|\s)active-page\S+/g) || []).join(' ');                  });                  $wrap.addClass("active-page" + target);                  $navBtn.removeClass("active");                  $(this).addClass("active");                  $navPanel.addClass("invisible");                  currentPage = target;                  scrolling = true;                  setTimeout(function () {                      $navPanel.removeClass("invisible");                      scrolling = false;                  }, 1000);              } else {                  $wrap.animate({ "top": "-" + ((target - 1) * 100) + "%" }, 1000);              }          }      });  }); //@ sourceURL=pen.js  </script>