个人中心
gpt4 book ai didi

javascript - 在整页脚本中使导航可点击

转载 作者：行者123 更新时间：2023-11-29 20:47:51 25 4
gpt4 key购买 nike

我有一个基于全页脚本变体的简单项目。除了一件烦人的事情外，一切都很完美——我不明白如何让我的右导航项目符号可点击(到适当的部分)。我的 js 知识目前不太好，所以我真的很感激任何帮助，伙计们。谢谢!

$.fullPage = function(option) {
  var defaultOpt = {
      box: "#fullPageBox", // 滚屏页父元素
      page: ".fullPage", // 滚屏页面
      index: true, // 是否显示索引
      duration: 1000, // 动画时间
      direction: "vertical", // 滚屏方向 horizontal or vertical
      loop: true // 是否循环
    },
    This = this,
    index = 0,
    over = true;
  this.option = $.extend({}, defaultOpt, option || {});
  this.box = $(this.option.box);
  this.pages = $(this.option.page);
  this.duration = this.option.duration;

  // 绑定鼠标滚轮事件
  $(document).on("mousewheel DOMMouseScroll", function(ev) {
    var dir = ev.originalEvent.wheelDelta || -ev.originalEvent.detail;
    if (over === false) return;
    dir < 0 ? nextPage() : prevPage();
  });

  if (this.option.index) {
    initPagination();
  };

  function initPagination() {
    var oUl = $("<ul id='fullPageIndex'></ul>"),
      liStr = "";
    for (var i = 0, len = This.pages.length; i < len; i++) {
      liStr += "<li></li>";
    };
    $(document.body).append(oUl.append($(liStr)));
    $("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
  };

  function nextPage() {
    if (index < This.pages.length - 1) {
      index++;
    } else {
      index = 0;
    }
    scrollPage(index, This.pages.eq(index).position());
  };

  function prevPage() {
    if (index === 0) {
      index = This.pages.length - 1;
    } else {
      index--;
    }
    scrollPage(index, This.pages.eq(index).position());
  };

  function scrollPage(index, position) {
    over = false;
    var cssStr = This.option.direction === "vertical" ? {
      top: -position.top
    } : {
      left: -position.left
    };
    This.box.animate(cssStr, This.duration, function() {
      over = true;
    })
    $("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
  };

}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.pageBox {
  position: relative;
  height: 100%;
}

.main {
  width: 100%;
  height: 500%;
  min-width: 1200px;
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}

.main .fullPage {
  height: 25%;
}

.bg1 {
  background-color: #27AE60;
}

.bg2 {
  background-color: #3498DB;
}

.bg3 {
  background-color: #C0392B;
}

.bg4 {
  background-color: #4FC2E5;
}

.bg5 {
  background-color: #8E44AD;
}

#fullPageIndex {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#fullPageIndex li {
  width: 10px;
  height: 10px;
  list-style: none;
  background-color: black;
  margin: 6px 0;
  border-radius: 50%;
}

#fullPageIndex li.active {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
  <div class="pageBox">
    <div class="main" id="fullPageBox">
      <div class="fullPage bg1">jQuery fullPage.js</div>
      <div class="fullPage bg2">Section 2</div>
      <div class="fullPage bg3">Section 3</div>
      <div class="fullPage bg4">Section 4</div>
      <div class="fullPage bg5">Section 5</div>
    </div>
  </div>

  <script>
    $.fullPage();
  </script>

</body>

最佳答案

向您的 div 添加一个 id 属性，并向导航到所需部分的列表元素添加一个 anchor 。如下:

<body>
  <div class="pageBox">
    <div class="main" id="fullPageBox">
      <div id="section1" class="fullPage bg1">jQuery fullPage.js</div>
      <div id="section2" class="fullPage bg2">Section 2</div>
      <div id="section3" class="fullPage bg3">Section 3</div>
      <div id="section4" class="fullPage bg4">Section 4</div>
      <div id="section5" class="fullPage bg5">Section 5</div>
    </div>
  </div>

  <script>
    $.fullPage();
  </script>

</body>

更新您呈现列表项的 js，使其看起来像这样:

function initPagination() {
  var oUl = $("<ul id='fullPageIndex'></ul>"),
    liStr = "";
  for (var i = 0, len = This.pages.length; i <= len; i++) {
    var sectionNum = i + 1;
    liStr += '<li><a href="#section' + sectionNum + '"></a></li>';
  };
  $(document.body).append(oUl.append($(liStr)));
  $("#fullPageIndex li").eq(index).addClass("active").siblings().removeClass("active");
};

阅读更多 here

编辑:

由于您也要求平滑滚动，因此您可以将其添加到您的 JS 中:

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

片段的来源可以在 this 上找到页面。

关于javascript - 在整页脚本中使导航可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53610321/

25 4 0
文章推荐： javascript - Coffeescript - 如何在 ruby​​ on rails 中将 javascript 转换为 coffeescript？
文章推荐： php - JQWidgets 组合框键入的值未回显或提交到数据库
文章推荐： Android BroadcastReceiver 安全性 - 有必要检查发起者包的 Intent 吗？
文章推荐： php - where 子句在 codeigniter 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com