jQuery封装满屏滚动

最新推荐文章于 2024-11-01 13:37:40 发布

P_ang__

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量198

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/P_ang__/article/details/136551919

版权

本文介绍了如何使用HTML、CSS和自定义的JavaScript函数（fullPage插件）创建一个响应式的页面布局，通过鼠标滚轮事件实现实时切换和动画效果的导航菜单。

摘要由CSDN通过智能技术生成

html文件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src=".././../jquery.min.js"></script>
  <script src="./index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: hidden;
      list-style: none;
    }

    p {
      margin-top: 40px;
      text-align: center;
      font-size: 24px;
    }

    ul {
      width: 20px;
      height: 80px;
      position: fixed;
      top: 0;
      right: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    ul li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgb(78, 78, 78);
      opacity: 0.6;
    }

    .active {
      background-color: #c0c0c0;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="box">
      <p>页面1</p>
    </div>
    <div class="box">
      <p>页面2</p>
    </div>
    <div class="box">
      <p>页面3</p>
    </div>
    <div class="box">
      <p>页面4</p>
    </div>
    <div class="box">
      <p>页面5</p>
    </div>
  </div>
  <ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <script>
    $("p").eq(0).css({ fontSize: "40px" })
    $(function () {
      $('.content').fullPage({
        arrColor: ["#6666CC", "#9933CC", "#66CC99", "#CC3333", "#FF3399"],
        after: function (index) {
          $("p").css({ fontSize: "24px" })
          $("p").eq(index).css({ fontSize: "40px" }, 500)
        }
      })
    })
  </script>
</body>

</html>

js文件

; (function () {
  $.fn.fullPage = function (option) {
    // 获取所有页面
    let domList = $(this).children()
    let _this = this

    // 获取每个页面的高度
    let pageHeight = window.innerHeight;
    console.log(pageHeight);

    // 初始化页面
    $.each(domList, function (i, e) {
      $(e).css({ 'height': pageHeight, 'background-color': option.arrColor[i] })
    })
    $('ul').css({ top: pageHeight / 2, marginTop: -$('ul').height() })

    // 定义当前页面 index
    let index = 0

    let d = null
    $(document).on('mousewheel', function (e) {
      if (d != null) {
        clearTimeout(d)
      }
      d = setTimeout(function () {
        // 向下滚动 100 ；向上滚动 -100
        // console.log(e.originalEvent.deltaY);
        if (e.originalEvent.deltaY == 100) {
          index = index >= domList.length - 1 ? domList.length - 1 : index + 1
        } else if (e.originalEvent.deltaY == -100) {
          index = index <= 0 ? 0 : index - 1
        }
        $('ul li').eq(index).siblings().attr('class', '')
        $('ul li').eq(index).attr('class', 'active')
        $(_this).stop().animate({ marginTop: -(pageHeight * index) }, 500,
          function () {
            // 动画结束执行回调
            option.after && option.after(index)
          })
        d = null
      }, 200)
    })
  }
})()