原生js实现全屏滚动--fullPage

yuanzhanghu 发布于2019-08-23 15:07 / 1187人阅读

摘要：原生实现全屏滚动点击箭头，实现下一页滚轮事件上滑下滑滚动到对应页定时器解决函数连续执行页面滚动，导航对应变化点击导航，页面滚动部分全屏滚动第页第页第页第页第页下三角部分容器全屏滚动容器全屏滚动下一页和部分图片

原生js实现全屏滚动 fullPage.js

    function fullPage() {
      const fullPage = document.getElementsByClassName("full_page")[0];
      const fullPageItems = fullPage.getElementsByClassName("full_page_item");
      const sliderTab = document.getElementsByClassName("slider_tab")[0];
      const sliderTabItems = document.getElementsByTagName("li");
      const sliderTabDivs = document.getElementsByClassName("small_tab");
      const sliderTabImgs = sliderTab.getElementsByTagName("img");
      const nextPage = document.getElementsByClassName("next_page")[0];
      
      let pageIndex = 0, pageScroll = true, prevIndex = 0;
      
      document.onmousewheel = mouseWheel;
      document.addEventListener("DOMMouseScroll", mouseWheel)
    
      // 点击箭头，实现下一页
      nextPage.onclick = scrollDown
    
      sliderTabClick()
    
      // 滚轮事件
      function mouseWheel(e) {
        if(e.wheelDelta) {
          if(e.wheelDelta > 0) {
            scrollUp()
          } else {
            scrollDown()
          }
        } else {
          if(e.detail > 0) {
            scrollDown()
          } else {
            scrollUp()
          }
        }
      }
    
      // 上滑
      function scrollUp() {
        if(pageIndex > 0 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex --;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex <= 0) {
          pageIndex = 0
        }
      }
    
      // 下滑
      function scrollDown() {
        if(pageIndex < fullPageItems.length - 1 && pageScroll) {
          prevIndex = pageIndex;
          pageIndex ++;
          srcollToPage(pageIndex, prevIndex)
        } else if(pageIndex >= fullPageItems.length - 1) {
          pageIndex = fullPageItems.length - 1
        }
      }
    
      // 滚动到对应页
      function srcollToPage(pageIndex, prevIndex) {
        fullPage.style.top = - pageIndex * 100 + "%";
        fullPage.style.transition = `all ease-in ${(Math.abs(pageIndex - prevIndex) - 1)/2 + .3}s`
        sliderTabSelect(pageIndex)
        pageScroll = false
        scrollTimer()
        if(pageIndex == sliderTabItems.length -1) {
          nextPage.style.opacity = "0"
        } else {
          nextPage.style.opacity = "1"
        }
      }
    
      // 定时器 解决函数连续执行
      function scrollTimer() {
        setTimeout(function() {
          pageScroll = true
        }, 500)
      }
    
      // 页面滚动，导航对应变化
      function sliderTabSelect(index) {
        for(let i = 0; i < sliderTabDivs.length; i ++) {
          sliderTabDivs[i].classList.remove("active");
          sliderTabImgs[i].classList.remove("select");
        }
        sliderTabDivs[index].classList.add("active");
        sliderTabImgs[index].classList.add("select")
      }
    
      // 点击导航，页面滚动
      function sliderTabClick() {
        for(let i = 0; i < sliderTabItems.length; i ++) {
          sliderTabItems[i].onclick = function () {
            if(i > pageIndex) {
              fullPage.style.top = - (i - 1) * 100 + "%";
            } else {
              fullPage.style.top = - (i + 1) * 100 + "%";
            }
            srcollToPage(i, pageIndex)
            pageIndex = i
          }
        }
      }
    }

html部分--index.html

css部分--index.css

    /* 容器 */
    .container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }
    
    /* 全屏滚动容器 */
    .full_page {
      width: 100%;
      height: 500%;
      /* overflow: hidden; */
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .full_page_item {
      width: 100%;
      height: 20%;
      position: relative;
    }
    
    .home {
      background: url(../img/bg.png) #87b0a5;
    }
    
    .info {
      background: url(../img/bg.png) #109085;
    }
    
    .skill {
      background: url(../img/bg.png) #a29971;
    }
    
    .project {
      background: url(../img/bg.png) #788990;
    }
    
    .contact {
      background: url(../img/bg.png) #999;
    }
   
    /* 全屏滚动tab */
    .slider_tab {
      position: fixed;
      top: 50%;
      right: 30px;
      margin-top: -150px;
    }
    
    .slider_tab li {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    .slider_tab li div {
      width: 15px;
      height: 15px;
      background: #f0f0f0;
      border-radius: 50%;
    }
    
    .slider_tab li div.active {
      width: 50px;
      height: 50px;
      background: #666;
      transition: all .3s;
    }
    
    .slider_tab li div img {
      width: 60%;
      height: 60%;
      padding-top: 20%;
      padding-left: 20%;
      display: none;
    }
    
    .slider_tab li div img.select {
      display: block;
    }
    
    /* 下一页 */
    .next_page {
      width: 30px;
      height: 30px;
      position: fixed;
      left: 50%;
      margin-left: -15px;
      cursor: pointer;
      animation:jump .8s infinite;
      -moz-animation:jump .8s infinite; /* Firefox */
      -webkit-animation:jump .8s infinite; /* Safari and Chrome */
      -o-animation:jump .8s infinite; /* Opera */
    }
    
    .next_page img { 
      width: 100%;
    }
    
    @keyframes jump
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-moz-keyframes jump /* Firefox */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-webkit-keyframes jump /* Safari 和 Chrome */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }
    
    @-o-keyframes jump /* Opera */
    {
      0% {bottom:70px;}
      100% {bottom:55px;}
    }

js部分--index.js

    window.onload = function() {
      fullPage()
    }

图片

云服务器 GPU云服务器原生js滚轮滚动原生js实现 js实现浏览器全屏 ajax原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101526.html

在全屏滚动页面下实现鼠标滚轮的子级交互

摘要：由此，我们可以完全屏蔽的默认滚动触发，改用方法控制全屏滚动，解除了全屏滚动与鼠标滚轮事件的强耦合。此外，通过定时器延时秒设置的值，将用户的鼠标滚轮操作强制分为两步，最终实现了目的。需求分析刚进公司产品提出一个需求：在全屏页面中滚动鼠标滚轮更新文本，回滚再恢复原文本，同时不影响全屏页面的正常切换：初始状态 showImg(https://segmentfault.com/img/b...

godiscoder 2019-08-19 17:18 评论0 收藏0
AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。注意，虽然是扫码体验，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 评论0 收藏0
实现小小的fullpage

摘要：也尝试了这个方案，选择毫秒效果相对最佳。方案继续思考一开始的思路为啥出现问题。经过老大提醒，并结合千牛之前出现的动画问题，感觉是动画结束和控制没有达到一致。除了过渡有且只有事件，动画开始，动画结束事件，动画重复运动事件。需求背景今天运营给了一个需求，要做个引导页，也就是全屏滚动。考虑到只有3张图，就自己码个吧！说干就干。思路设置一个外层container, 用户的可见区域，也...

hosition 2019-08-21 14:05 评论0 收藏0
用 ES6 写全屏滚动插件

摘要：这篇文章将介绍如何使用原生主要使用语法实现全屏滚动插件，兼容手机触屏，触摸板优化，支持自定义页面动画，压缩后文件只有。这篇文章将介绍如何使用原生 JS （主要使用 ES6 语法）实现全屏滚动插件，兼容 IE 10+、手机触屏，Mac 触摸板优化，支持自定义页面动画，压缩后 gzip 文件只有 2.15KB。完整源码在这 pure-full-page，点这查看 demo。 1）前面的话...

liuchengxu 2019-08-26 11:52 评论0 收藏0