높이가 다양한 웹 사이트에 대해 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 id="page">page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3 id="page">page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3 id="page">page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div></code>

위 내용은 높이가 다양한 웹 사이트에 대해 jQuery를 사용하여 반응형 수평 페이지 슬라이딩을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!