FullPage DEMO

最新推荐文章于 2022-04-28 18:08:04 发布

SnrtIevg

最新推荐文章于 2022-04-28 18:08:04 发布

阅读量341

点赞数

文章标签： html fullpage js

本文链接：https://blog.csdn.net/Snrt_Julier/article/details/103627962

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

fullpage demo

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 99999;
      overflow: hidden;
    }

    .slide1 {
      background-color: rgb(27, 188, 155);
    }

    .slide2 {
      background-color: rgb(255, 153, 0);
    }

    .slide3 {
      background-color: rgb(123, 170, 190);
    }
  </style>

</head>

<body>
  <div id="container">
    <div id="scrollContainer">
      <div style="height: 0;" class="slide slide1"></div>
      <div style="height: 0;" class="slide slide2"></div>
      <div style="height: 0;" class="slide slide3"></div>
    </div>
  </div>
  <script>
    let height = document.getElementById("container").offsetHeight;
    let slides = document.getElementsByClassName("slide");
    for (let ele of slides) {
      if (ele) {
        ele.style.height = `${height}px`;
      }
    }
    let scrollEle = document.getElementById("scrollContainer");

    let page = {
      timeWait: 1000,
      duration: 850,
      current: 1,
      len: 3,
      isScrolling: false,
      next: function () {
        if ((this.current + 1) <= this.len) {
          this.current += 1;
          this.move(this.current);
        }
      },
      pre: function () {
        if (this.current - 1 > 0) {
          this.current -= 1;
          this.move(this.current);
        }
      },
      move: function (index) {
        this.isScrolling = true;
        let di = -(index - 1) * height + 'px';
        // page.start = +new Date();
        scrollEle.style.cssText= `transition: all ease ${this.duration / 1000}s;transform: translateY(${di})`
        // $scroll.css('transform', 'translateY(' + di + ')');
        setTimeout(() => {
          this.isScrolling = false;
        }, this.timeWait);
      }
    };

    // 滚动事件绑定
    function bindMouseWheel(page) {
      let type = 'mousewheel';
      let deltaY = 0;

      function mouseWheelHandle(event) {
        // console.log("滚轮事件");
        if (page.isScrolling) { // 加锁部分
          return false;
        }
        let e = event.originalEvent || event;
        console.log("e:{}", e.deltaY);

        deltaY = e.deltaY;
        if (deltaY > 0) {
          page.next();
        } else if (deltaY < 0) {
          page.pre();
        }
      }
      document.addEventListener('mousewheel', mouseWheelHandle, true);
      // $(document).on('mousewheel', mouseWheelHandle);
    }

    bindMouseWheel(page);
  </script>
</body>
</html>

兼容性没有测试

SnrtIevg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FullPage DEMO

fullpage demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫