Deshalb werde ich heute dieses FullPage vorstellen, das sich von FullPage.js unterscheidet und eine bessere Kompatibilität aufweist und mit IE6 abwärtskompatibel ist. Es ist nicht auf eine JS-Bibliothek angewiesen und kann unabhängig verwendet werden. Obwohl es in Bezug auf die Funktionalität nicht so leistungsstark ist wie fullPage.js, ist es für den allgemeinen Gebrauch ausreichend, insbesondere hinsichtlich der Animationseffekte. Sie können Skalierung und Drehung frei einstellen, um verschiedene Animationseffekte zu erzeugen. Es unterstützt auch horizontales Scrollen, das fullPage.js nicht bietet.
Bevor wir es vorstellen, werfen wir einen Blick auf die Operations-Renderings:
Stellen Sie die Kernbibliothek vor. Pagefull hängt von jeder JS-Bibliothek ab, sodass Sie sie nur selbst vorstellen müssen
<script src="js/fullPage.min.js"></script>
HTML schreiben
//请在head区加入以下代码，移动端使用
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<!--[if lte IE 7]>
<body scroll="no">
<![endif]-->
<!--[if gt IE 7]><!-->
<body>
<!--<![endif]-->
<div id="pageContain">
<div class="page page1 current">
<div class="contain">
</div>
</div>
<div class="page page2">
<div class="contain">
</div>
</div>
<div class="page page3" data-step="4">
<div class="contain">
<p class="demo-data-step">data-step可以让你在不切屏的情况下更换动画</p>
</div>
</div>
<div class="page page4">
<div class="contain">
</div>
</div>
<div class="page page5">
<div class="contain">
</div>
</div>
<div class="page page6">
<div class="contain">
</div>
</div>
</div>
<ul id="navBar">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>CSS schreiben Freunde, die mit CSS3 nicht vertraut sind, können es hier nicht nachholen Bedürfnisse des Projekts.
html {
-ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */
}
body,
div,
p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
width: 100%;
*cursor: default;
overflow: hidden;
font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
}
#pageContain {
overflow: hidden;
}
.page {
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.contain {
width: 100%;
height: 100%;
display: none;
position: relative;
z-index: 0;
}
.current .contain,.slide .contain {
display: block;
}
.current {
display: block;
z-index: 1;
}
.slide {
display: block;
z-index: 2;
}
.swipe {
display: block;
z-index: 3;
transition-duration: 0ms !important;
-webkit-transition-duration: 0ms !important;
}
.page1 {
background: #37c1e3;
}
.page2 {
background: #009922;
}
.page3 {
background: #992211;
}
.page4 {
background: #ff00ff;
}
.page5 {
background: #00ff00;
}
.page6 {
background: #22ffff;
}
#navBar {
z-index: 3;
position: absolute;
top: 10%;
right: 3%;
}
#navBar .active {
background: #ccc;
}
#navBar li {
cursor: pointer;
margin-bottom: 10px;
transition: all .7s ease;
border-radius: 50%;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
}
p {
width: 200px;
height: 100px;
color:#fff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
opacity: 1;
transition: all .8s ease;
transform-origin: 50% 50%;
}
.step1 p {
transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
}
.step2 p {
opacity: 0;
transform: scale(2);
-webkit-transform: scale(2);
}
.step3 p {
transform: scale(1);
-webkit-transform: scale(1)
opacity: 1;
}
.step4 p {
-webkit-transform: rotate(360deg) translate(0,-200px) scale(.3);
transform: rotate(360deg) translate(0,-200px) scale(.3);
opacity: 0;
}Schreiben Sie JS, um den Effekt zu erzielen
var runPage;
runPage = new FullPage({
id : 'pageContain', // 容器id
slideTime : 800, // 每页切换时间，单位为毫秒
continuous : false, // 是否循环(即能从最后页跳到第一页面)
effect : { // 滚动效果
transform : {
translate : 'Y', // 'X'|'Y'|'XY'|'none' X轴|Y轴|XY轴|无
scale : [.1, 1], // [scalefrom, scaleto] [起始缩放比例, 结束时缩放比例]
rotate : [0, 0] // [rotatefrom, rotateto] [起始旋转角度, 结束时旋转角度]
},
opacity : [0, 1] // [opacityfrom, opacityto][起始透明度, 结束时透明度]
},
mode : 'wheel,touch,nav:navBar', // 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'
easing : 'ease' // easing('ease','ease-in','ease-in-out' 或使用贝塞尔曲线 [.33, 1.81, 1, 1];
// ,onSwipeStart : function(index, thisPage) { // 触摸开始时的回调函数
// return 'stop';
// }
// ,beforeChange : function(index, thisPage) { // 滑动开始时的回调函数
// return 'stop';
// }
// ,callback : function(index, thisPage) { // 滑动结束后的回调函数
// alert(index);
// };
});
Detaillierte Parametereinstellungen
id String – äußere Paket-ID
slideTime Integer (Standard: 800) – Seitenwechselzeit (Millisekunden)
Effektobjekt (Standard:{}) – Effektparameter
mode String (Standard:'') – Konvertierungsmodus „wheel,touch,nav:navBar“ bedeutet „wheel, touch, navbar:navbarid“
Rückruffunktion – Rückruffunktion nach Ende des Schiebevorgangs
Schnittstelle
Fullpage bietet auch einige Ausreden für Entwickler, die dieses Plugin verwenden, um Folgendes aufzurufen:
prev() Direkt zur vorherigen Seite schieben
next() Direkt zur nächsten Seite schieben
thisPage() Gibt die aktuelle Seitenzahl zurück
go(num) Direkt zur Seite num schieben
Oben geht es darum, einen Vollbild-Bildlaufeffekt ähnlich dem NetEase-Postfach zu erzielen. Ich hoffe, Sie können einen Vollbild-Bildlaufeffekt erstellen, der für Ihre eigene Website geeignet ist.
