原生js實(shí)現(xiàn)全屏滾動--fullPage

yuanzhanghu 發(fā)布于2019-08-23 15:07 / 1231人閱讀

摘要：原生實(shí)現(xiàn)全屏滾動點(diǎn)擊箭頭，實(shí)現(xiàn)下一頁滾輪事件上滑下滑滾動到對應(yīng)頁定時(shí)器解決函數(shù)連續(xù)執(zhí)行頁面滾動，導(dǎo)航對應(yīng)變化點(diǎn)擊導(dǎo)航，頁面滾動部分全屏滾動第頁第頁第頁第頁第頁下三角部分容器全屏滾動容器全屏滾動下一頁和部分圖片

原生js實(shí)現(xiàn)全屏滾動 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)
    
      // 點(diǎn)擊箭頭，實(shí)現(xiàn)下一頁
      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
        }
      }
    
      // 滾動到對應(yīng)頁
      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"
        }
      }
    
      // 定時(shí)器 解決函數(shù)連續(xù)執(zhí)行
      function scrollTimer() {
        setTimeout(function() {
          pageScroll = true
        }, 500)
      }
    
      // 頁面滾動，導(dǎo)航對應(yīng)變化
      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")
      }
    
      // 點(diǎn)擊導(dǎo)航，頁面滾動
      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云服務(wù)器云服務(wù)器原生js滾輪滾動原生js實(shí)現(xiàn) js實(shí)現(xiàn)瀏覽器全屏 ajax原生js實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101526.html

發(fā)表評論

登陸后可評論

0條評論

yuanzhanghu

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 803·2023-04-25 16:55
【數(shù)據(jù)類型存儲原理】數(shù)據(jù)的存儲 - 深度剖析數(shù)據(jù)在內(nèi)存中的存儲

閱讀 2860·2021-10-11 10:59
DediPath：勞工節(jié)優(yōu)惠，洛杉磯獨(dú)服月付$39起，全場VPS一律4折優(yōu)惠

閱讀 2113·2021-09-09 11:38
艾云：聖何塞IP更換完成，原生IP，全解流媒體，G口帶寬，月付15元起

閱讀 1833·2021-09-03 10:40
web響應(yīng)式布局之 meta詳解

閱讀 1515·2019-08-30 15:52
純CSS實(shí)現(xiàn)絲帶上揚(yáng)效果

閱讀 1171·2019-08-30 15:52
CSS2-盒模型、背景圖片

閱讀 983·2019-08-29 15:33
切圖崽的自我修養(yǎng)－[MVVM] 進(jìn)一步認(rèn)知viewModel

閱讀 3521·2019-08-29 11:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生js實(shí)現(xiàn)全屏滾動--fullPage

相關(guān)文章

**在全屏滾動頁面下實(shí)現(xiàn)鼠標(biāo)滾輪的子級交互**

AlloyTouch全屏滾動插件發(fā)布--30秒搞定順滑H5頁

***實(shí)現(xiàn)小小的fullpage***

用 ES6 寫全屏滾動插件

發(fā)表評論

0條評論

yuanzhanghu

男|高級講師

TA的文章

tensorflow

【數(shù)據(jù)類型存儲原理】數(shù)據(jù)的存儲 - 深度剖析數(shù)據(jù)在內(nèi)存中的存儲

DediPath：勞工節(jié)優(yōu)惠，洛杉磯獨(dú)服月付$39起，全場VPS一律4折優(yōu)惠

艾云：聖何塞IP更換完成，原生IP，全解流媒體，G口帶寬，月付15元起

web響應(yīng)式布局之 meta詳解

純CSS實(shí)現(xiàn)絲帶上揚(yáng)效果

CSS2-盒模型、背景圖片

切圖崽的自我修養(yǎng)－[MVVM] 進(jìn)一步認(rèn)知viewModel

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生js實(shí)現(xiàn)全屏滾動--fullPage

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！