In diesem Artikel wird analysiert, wie Sie mit dem Fullpage-Plugin schnell Seiten zum Umblättern im Vollbildmodus erstellen können. Diese Funktion ist sehr fortgeschritten, um zu sehen, wie das Fullpage-Plugin funktioniert -in erzielt diesen Effekt.
Wir haben oft Websites zum Umblättern im Vollbildmodus gesehen. Sie sehen sehr hochwertig aus und es kann für einige Studenten immer noch sehr schwierig sein, sie nativ zu entwickeln.
Heute stelle ich Ihnen das Fullpage-Plugin vor, mit dem dieser Effekt ebenfalls erzielt werden kann.
Lassen Sie mich den Schülern diese Seite der Xiaomi-Website zeigen: http://www.mi.com/hongmi2a/
Nachdem wir die Seite gelesen haben, gehen wir direkt zu unserem heutigen Thema!
Einige notwendige Ressourcen
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" >
|
Nach dem Login kopieren
2. Seitenstruktur
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>
|
Nach dem Login kopieren
3. Wenn wir einen Slide-Effekt in einem haben müssen, ist die Struktur wie folgt
1 2 3 4 5 | <p class ='section'>
<p class ='slide'>第一张幻灯片</p>
<p class ='slide'>第一张幻灯片</p>
<p class ='slide'>第一张幻灯片</p>
</p>
|
Nach dem Login kopieren
Dies ist Unser einfaches Seitenlayout ist fertig. Jetzt müssen wir nur noch die API-Struktur des Plug-Ins verwenden
4. Das Format und die Verwendung des Plug-Ins:
1 2 3 4 5 | $( function (){
$('#fullpage').fullpage({
})
})
|
Nach dem Login kopieren
Einige API-Schnittstellen
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:
|
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie das Fullpage-Plug-in schnell eine Seite mit Umblättereffekt im Vollbildmodus entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!