suchen

Heim >Web-Frontend >js-Tutorial >Implementieren Sie einen Vollbild-Bildlaufeffekt basierend auf jquery_javascript-Kenntnissen

Implementieren Sie einen Vollbild-Bildlaufeffekt basierend auf jquery_javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:29:331414Durchsuche

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.

  • Kompatibel mit Desktop- (dh 5.5) und mobiler Version
  • Sie können damit Ihre persönliche Homepage oder Webanwendung erstellen
  • Dies ist ein kompaktes Framework, das kein jQuery verwendet und weniger als 9 KB groß ist

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen request, request.form und request.querystring in Jquery_jqueryNächster Artikel：Der Unterschied zwischen request, request.form und request.querystring in Jquery_jquery

In Verbindung stehende Artikel

Mehr sehen