suchen

Heim  >  Artikel  >  Web-Frontend  >  Reiner Javascript-Mobile-First-Diashow-Effekt_Javascript-Kenntnisse

Reiner Javascript-Mobile-First-Diashow-Effekt_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:34:091550Durchsuche

Kurzes Tutorial
wallop ist ein reines JavaScript-Diashow-Plugin für Mobilgeräte. Dieses Diashow-Plugin ist nur 4 KB groß. Sein Prinzip besteht lediglich darin, entsprechende Klassen für HTML-Elemente hinzuzufügen und zu entfernen. Diese Klassenstile können Sie vollständig anpassen. Zu den Funktionen gehören:
Mobile first
Animations- und Übergangseffekte werden mit CSS
generiert Leicht, nur 4K-Größe
Hochflexibel und skalierbar
Anpassbare Ereignisse und API
Keine externen Abhängigkeiten             

Anwendung
Um dieses Diashow-Plug-in zu verwenden, müssen Sie zunächst die Dateien wallop.css und Wallop.min.js einführen. 

<link rel="stylesheet" href="path/to/wallop.css">
<script src="path/to/Wallop.min.js"></script>

HTML-Struktur

Die grundlegende HTML-Struktur dieser Folie ist wie folgt. Sie können .Wallop-item--current class zur ersten Folie hinzufügen. 

<div class="Wallop">
 <div class="Wallop-list">
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
  <div class="Wallop-item">…</div>
 </div>
 <button class="Wallop-buttonPrevious">Previous</button>
 <button class="Wallop-buttonNext">Next</button>
</div>

Initialisierungs-Plug-in

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

Animationseffekte hinzufügen

Dieses Diashow-Plug-in verfügt standardmäßig nicht über Animationsübergangseffekte. Wenn Sie Animationseffekte hinzufügen müssen, müssen Sie die entsprechende Datei wallop-animation.css einführen und dem Element die Klasse Wallop--xxxx hinzufügen. Um beispielsweise einen Fade-Effekt hinzuzufügen: 

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

Verfügbare Animationstypen

Die für diese Folie verfügbaren Übergangsanimationstypen sind:
Wallop--slide
Wallop – verblassen
Wallop--scale
Wallop – drehen
Wallop--fold
Wallop--vertikal-slide
Oben sind einige integrierte Übergangsanimationstypen aufgeführt. Sie können auch Ihre eigene Übergangsanimation anpassen.
Konfigurationsparameter
Hier sind einige verfügbare Konfigurationsparameter:
buttonPreviousClass: 'Wallop-buttonPrevious'
buttonNextClass: 'Wallop-buttonNext'
itemClass: 'Wallop-item'
currentItemClass: 'Wallop-item--current'
showPreviousClass: 'Wallop-item--showPrevious'
showNextClass: 'Wallop-item--showNext'
hidePreviousClass: 'Wallop-item--hidePrevious'
hideNextClass: 'Wallop-item--hideNext'
Karussell: wahr
Methode
Das Wallop-Diashow-Plugin bietet einige grundlegende Methoden zur Tastensteuerung:
goTo

Ermöglicht das Springen zur Folie am angegebenen Index. 

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

nächstes

Springe zur nächsten Folie. 

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

vorheriges

Springe zur vorherigen Folie. 

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

Veranstaltung
Wallop gibt bei jedem Folienwechsel ein Ereignis aus und gibt ein Detailobjekt zurück, das den Index der aktuellen Folie und das Wallop-Objekt enthält. 

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
Wallop.on('change', function(event) {
 // event.detail.wallopEl
 // => <div class="Wallop">…</div>
 
 // event.detail.currentItemIndex
 // => number
});

Das Obige ist der reine JavaScript-Prozess zur Erstellung von Diashow-Effekten, der mit Ihnen geteilt wird. Ich hoffe, er kann Ihnen dabei helfen, schönere Diashow-Effekte zu erstellen.

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：JQuery-Effektsammlung zum Erstellen von Spezialeffekten für Computer-Gesundheitsuntersuchungsergebnisse mit Quellcode download_jqueryNächster Artikel：JQuery-Effektsammlung zum Erstellen von Spezialeffekten für Computer-Gesundheitsuntersuchungsergebnisse mit Quellcode download_jquery

In Verbindung stehende Artikel

Mehr sehen