代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 免费源码 正文

html5整屏网页滚动切换特效

时间:2020-05-24 [免费源码]作者:adminjie 浏览:249 次

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

1
2
<script src=string" class="page_speeder_2039421365">"modernizr.js"></script>
<script type="text/javascript" src="jquery.js"></script>

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>

html5整屏网页滚动切换特效


大小 : 41.9 KB |  下载量 : 3  |  文件类型 : 压缩文件  

转载请注明来源:html5整屏网页滚动切换特效

本文永久链接地址:https://www.adminjie.com/post/2586.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

栏目导航
  • 代码之家会员升级
  • 最新文章
    • 魔方HR人力资源管理系统v2版_免费人力资源系统源码下载

      魔方HR人力资源管理系统v2版_免费人力资源系统源码下载

      魔方HR人力资源管理系统v2版_免费人力资源系统源码下载魔方人力资源管理系统是一个适合中小型企业、家政服务公司、中介猎头公司等的HR人力资源管理源码。魔方人力资...

    • 龙兵智能名片独立版个人源码

      龙兵智能名片独立版个人源码

      龙兵平台名片,依托微信生态,0亿用户,以大数据和智能算法为基础,融合名片裂变系统、超级小程序官网、Al员工雷达、销售管理CRM、在线智能客服、销售数据分析、公司...

    • 科美企业手机电脑建站系统标准版 v8.8

      科美企业手机电脑建站系统标准版 v8.8

      科美企业手机电脑建站系统标准版v8.8更新日志新增加导航栏售后服务功能科美企业手机电脑建站系统标准版特别提醒1.切勿用那些调试软件调试(比如:aspweb、...

    • 网新中英文企业手机电脑一体化建站视频版 v8.1

      网新中英文企业手机电脑一体化建站视频版 v8.1

      网新中英文企业手机电脑一体化建站视频版v8.1更新日志更新记录:客服中心增加MSN链接客服功能网新中英文企业手机电脑一体化建站视频版程序简介网新中英文企业手...

    • 最新网上很火的网页在线制作网站完整版源码

      最新网上很火的网页在线制作网站完整版源码

      最新网上很火的网页在线制作网站完整版源码以前网上非常火的各种网站在线制作,可是以前网上分享的源码都是乱七八糟,错乱的错乱假的假,不能用的不能用。今天给大家分享一...

  • 阿里云大优惠
  • 热门文章