如何使用 jQuery 为不同高度的网站创建响应式水平页面滑动？

水平响应式页面滑动

要设计与提供的图像类似的响应式页面导航，请考虑以下 jQuery 解决方案：

• 计算尺寸：确定幻灯片数量，设置包装宽度，并相应地设置每张幻灯片的宽度。
• 幻灯片动画：绑定导航链接的点击事件，使包装器的左边距具有动画效果以显示相应的幻灯片。
• 活动链接： 切换单击链接的“选定”类以突出显示活动页面。

这种方法可确保导航适应屏幕尺寸并处理不同高度的页面，从而消除间隙。此外，它利用单个菜单来最小化标记并支持动态数量的幻灯片。

<code class="js">$(document).ready(function () {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth + '%');
  $('.page').width(slideWidth + '%');

  $('a.scrollitem').click(function () {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100 + '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});</code>

<code class="css">html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}</code>

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div></code>

以上是如何使用 jQuery 为不同高度的网站创建响应式水平页面滑动？的详细内容。更多信息请关注PHP中文网其他相关文章！