반응형 수평 탐색 시스템을 설계하는 데는 몇 가지 과제가 있습니다.
이 솔루션은 jQuery를 사용하고 다음과 같은 주요 기능을 포함합니다.
<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>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!