Sprechen Sie über das vorläufige Verständnis der Fähigkeiten von impress.js

Sprechen Sie über das vorläufige Verständnis der Fähigkeiten von impress.js_javascript

WBOY

Freigeben： 2016-05-16 15:40:06

Original

1451 Leute haben es durchsucht

1. Impress.js verstehen

　impress.js ist ein Präsentationsebenen-Framework (Präsentationstool), das von Entwicklern verwendet wird, die CSS3- und JavaScript-Sprachen verwenden.

Jetzt können normale Entwickler impress.js verwenden, um ein Präsentationstool mit ähnlichen Effekten, aber besserer Leistung als das FLASH-basierte Prezi zu entwickeln. Zu seinen Funktionen gehören unbegrenzte Drehung und Skalierung der Leinwand, Platzierung von Text beliebiger Größe in jedem Winkel, Unterstützung für CSS3-3D-Effekte usw. Gleichzeitig werden auch Folienpräsentationen im klassischen PowerPoint-Format unterstützt.

Derzeit wird impress.js auf Basis von Webkit-Browsern (Chrome, Safari) entwickelt, kann aber auch normal auf anderen Browsern ausgeführt werden, die auf Nicht-Webkit-Engines basieren, aber CSS3 3D unterstützen.

2. Verwenden Sie impress.js

Wir stellen vor: impress.js:

Code kopieren Der Code lautet wie folgt:

Jetzt können Sie sehen, wie einfach es ist, eine neue Diashow zu erstellen. Jede Folie ist ein

-Element (innerhalb eines Wrappers), dessen Klassenname „step“ ist.

Code kopieren Der Code lautet wie folgt:

Meine erste Folie

Auch wenn Sie eine einfache Diashow erstellen, macht es Spaß, wenn Sie anfangen, Datenattribute zu Ihrer Diashow hinzuzufügen. Datenattribute stellen Eigenschaften Ihrer Folie dar, wenn es sich nicht um die aktive Folie handelt. Sie können die folgenden Datenattribute verwenden:

data-x = x-Koordinate der Folie

data-y = Y-Koordinate der Folie

data-scale = Zoom durch Angabe eines Werts. Ein data-scale von 5 vergrößert Ihre Folie um das Fünffache der Originalgröße

data-rotate = Drehen Sie Ihre Folien um einen numerischen Grad

data-rotate-x = Für 3D gibt diese Zahl an, um wie viel es relativ zur x-Achse gedreht werden soll. (Nach vorne lehnen/zurücklehnen)

data-rotate-y = Für 3D gibt diese Zahl an, um wie viel es relativ zur y-Achse gedreht werden soll. (Nach links/rechts schwenken)

data-rotate-z = Für 3D gibt diese Zahl an, um wie viel es relativ zur Z-Achse gedreht werden soll.

Instanzverzeichnis:

Der obige Inhalt ist mein vorläufiges Verständnis von impress.js. Ich werde ihn später eingehend studieren.