이 글에서는 Fullpage 플러그인을 사용하여 전체 화면 플립 페이지를 빠르게 개발하는 방법을 분석합니다. 이 기능은 매우 고급화된 기능이므로 Fullpage 플러그인이 어떻게 작동하는지 살펴보겠습니다. 이 효과를 얻습니다
전체 화면으로 페이지를 넘기는 웹사이트를 종종 볼 수 있습니다. 매우 고급스러워 보이지만 일부 학생들에게는 기본적으로 개발하기가 여전히 매우 어려울 수 있습니다.
오늘은 이런 효과를 낼 수 있는 Fullpage 플러그인을 소개해드리겠습니다.
학생들에게 Xiaomi 웹사이트의 이 페이지를 보여드리겠습니다: http://www.mi.com/hongmi2a/
페이지를 읽은 후 오늘 주제로 바로 넘어가겠습니다!
1. 필요한 리소스
1 2 3 4 5 6 7 8 | <script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js" ></script>
<script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js" ></script>
<link rel= "stylesheet" type= "text/css" href= "https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel= "external nofollow" >
|
로그인 후 복사
2. 페이지 구조
1 2 3 4 5 6 | <p id= "fullpage" >
<p class ='section'>第一页</p>
<p class ='section'>第二页</p>
<p class ='section'>第三页</p>
<p class ='section'>第四页</p>
</p>
|
로그인 후 복사
3. 구조는 다음과 같습니다
1 2 3 4 5 | <p class ='section'>
<p class ='slide'>第一张幻灯片</p>
<p class ='slide'>第一张幻灯片</p>
<p class ='slide'>第一张幻灯片</p>
</p>
|
로그인 후 복사
.
이것은 간단한 페이지 레이아웃입니다. 4. 플러그인의 형식 및 사용법:
1 2 3 4 5 | $( function (){
$('#fullpage').fullpage({
})
})
|
로그인 후 복사
5.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | sectionsColor:['red','#f04','#9b0','#d3f'],
controlArrows:false,
verticalCentered:true,
resize:true,
scrollingSpeed:1000,
anchors:['page1','page2','page3','page4'],
animateAnchor:false,
lokAnchors:true,
css3:true,
loopTop:true,
loopBottom:true,
continuousVertical:true,
loopHorizontal:false,
autoScrolling:true,
scrollBar:false,
paddingBottom:0,
fixedElements:'#header',
keyboardScrolling:true,
recordHistory:true,
menu:'#fullpageMenu',
navigation:true,
navigation:'right',
navigationTooltips:['page1','page2','page3','page4'],
showActiveTooltip:true,
slidesNavigation:true,
slidesNavPosition:'bottom',
scrollOverflow:true,
sctionSelector:
slideSelector:
|
로그인 후 복사
위 내용은 Fullpage 플러그인이 전체 화면 페이지 넘김 효과 페이지를 빠르게 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!