jQuery와 CSS를 사용하여 반응형 수평 페이지 슬라이딩 시스템을 만드는 방법은 무엇입니까?

반응형 수평 페이지 슬라이딩

문제

반응형 수평 탐색 시스템을 설계하는 데는 몇 가지 과제가 있습니다.

• 페이지 유지 관리 뷰포트 내 가시성
• 페이지 간 간격이나 겹침 방지
• 스크롤바 가시성과 함께 높이 100% 이상으로 확장되는 페이지 허용
• Internet Explorer 9 이상과의 호환성 보장

솔루션

이 솔루션은 jQuery를 사용하고 다음과 같은 주요 기능을 포함합니다.

1. 반응형 크기 조정: 스크립트는 총 너비를 계산합니다. 페이지 수에 따라 래퍼의 크기를 조정하여 반응형 크기 조정을 보장합니다.
2. 부드러운 전환: 탐색 링크를 클릭하면 래퍼의 왼쪽 여백에 부드럽게 애니메이션이 적용되어 갑작스러운 점프 없이 페이지 간에 전환됩니다.
3. 동적 높이 처리: 페이지 높이가 100% 이상으로 확장될 수 있으며 필요한 경우 스크롤바가 나타나 원치 않는 간격을 제거합니다.
4. 활성 링크 표시: 선택한 탐색 현재 페이지 위치를 나타내기 위해 링크가 강조 표시됩니다.
5. IE 호환성: 코드는 Internet Explorer 9 이상과 호환됩니다.

코드 구현

<code class="javascript">$(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>

CSS

<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>

결론

이 코드 조각은 반응형 수평 페이지 탐색을 위한 포괄적인 솔루션을 제공하여 명시된 요구 사항을 효율적으로 해결합니다. 유연성 덕분에 동적 탐색 메뉴가 가능하고 스크롤 막대가 있는 긴 페이지를 수용할 수 있습니다. 또한 Internet Explorer 9과의 호환성으로 다양한 브라우저와의 호환성을 보장합니다.

위 내용은 jQuery와 CSS를 사용하여 반응형 수평 페이지 슬라이딩 시스템을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!