在整页脚本中使导航可单击

时间：2018-12-04 10:03:03

标签： javascript jquery

我有一个基于整版脚本的变体的简单项目。除了一件烦人的事情，一切都完美无缺-我不明白如何使正确的导航项目符号可点击（在适当的部分）。目前我的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>

2 个答案:

答案 0 :(得分：1)

您的脚本中有一些错误。

首先，从HTML文件中删除以下代码：

<script>
  fullPage();
</script>

第二，您创建了错误的函数（方法）定义。我将$.fullpage = function(option) {替换为var fullpage = function(options) {

最后一个是：由于我们已经删除了fullpage()启动器，因此我们需要再次调用此方法。例如在您的JS文件的最后一行，

PS：

在Javascript中，您可以通过多种方式创建function。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions。

请参见下面的固定代码：

var 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");
  };

}

fullPage();
* {
  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/2.2.4/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>
</body>

答案 1 :(得分：1)

为您的div添加一个id属性，并将锚点添加到导航到所需部分的列表元素。如下：

<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页上找到。

相关问题
最新问题