jQuery와 CSS를 사용하여 반응형 수평 페이지 슬라이딩 탐색을 구현하는 방법은 무엇입니까?

반응형 가로 페이지 슬라이딩

제공한 이미지와 유사한 반응형 가로 탐색을 만들려면, CSS와 jQuery를 조합하여 사용할 수 있습니다. 다음 스니펫은 모든 기기의 화면 너비에 맞게 페이지 크기를 조정합니다.

1. 슬라이드 수를 계산하고 래퍼 너비를 조정합니다. 그에 따라.


2. 슬라이드 수에 따라 각 슬라이드의 너비를 설정하여 수평으로 맞도록 합니다.


3. jQuery를 사용하여 왼쪽 슬라이드에 애니메이션을 적용합니다. 메뉴 항목을 클릭하면 해당 슬라이드가 표시되도록 래퍼 여백을 조정합니다.

이 솔루션은 다음과 같은 몇 가지 장점을 제공합니다.

1. 마크업 중복을 최소화하기 위해 탐색 메뉴 인스턴스를 하나만 사용합니다.


2. 다음과 같이 jQuery만 필요합니다. 의존성.


3. 이 기능은 슬라이드 수에 관계없이 작동하므로 동적 솔루션이 됩니다.

< p>내용이 짧은 슬라이드에 스크롤 막대가 표시되지 않도록 하려면 CSS에서 페이지의 최소 높이를 설정하세요.

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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 higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

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