Heim > Artikel > Web-Frontend > So erstellen Sie einen Diashow-Effekt mit Javascript

So erstellen Sie einen Diashow-Effekt mit Javascript

清浅Original: 2019-02-16 13:17:265076Durchsuche

Wir können den Folieneffekt über das revealjs-Framework in Javascript erzielen. Wir können das Abschnitts-Tag verwenden, um eine einseitige Folie zu erstellen und ihr Text und Bilder hinzuzufügen

[Empfohlene Kurse: JavaScript-Tutorial]

Sie müssen die JavaScript-Sprache verwenden, um den Effekt von Folien zu erzielen Ein Framework: Reveal.js-Framework. Als nächstes werde ich anhand konkreter Beispiele erklären, wie der Slide-Effekt erzielt wird.

Einführung in das Reveal.js-Framework

reveal.js Framework ist ein Framework, mit dem wir auf einfache Weise schöne Diashow-Effekte über HTML-Code erstellen können. Es ist dasselbe wie die PPT-Folien, die wir in unserer täglichen Arbeit verwenden. Reveal.js ist ein Framework, das nicht von anderen Javascript-Bibliotheken abhängt. Man kann sagen, dass es sich um eine unabhängige Javascript-Plug-In-Bibliothek handelt. Es bietet eine Vielzahl von Folienübergangseffekten und ist ein großartiger Präsentationsrahmen.

So erstellen Sie einen Diashow-Effekt mit Javascript

Reveal.js-Framework-Download-Adresse: https://github.com/hakimel/reveal.js

(1) Reveal herunterladen. js-Framework und fügen Sie es in die HTML-Datei ein

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href=".\reveal.js-master\css\reveal.css">
  <!-- 引入主题 -->
  <link rel="stylesheet" href=".\reveal.js-master\css\theme\moon.css">
  <!-- 用于显示代码高亮 -->
  <link rel="stylesheet" href=".\reveal.js-master\lib\css\zenburn.css">
</head>
<body>
  <script type="text/javascript" src=".\reveal.js-master\js\reveal.js"></script>
</body>
</html>

(2) Nachdem die externe Datei eingeführt wurde, beginnen Sie mit der Erstellung der Diashow

Zuerst erstellen es in der HTML-Seite Zwei div-Elemente auf Blockebene Beachten Sie, dass die Klassennamen „reveal“ und „slides“ verwendet werden müssen. Erstellen Sie dann ein Abschnitts-Tag in der zweiten div-Ebene, um eine Folienseite zu erstellen. Jeder generiert eine separate Folie. Nachdem die HTML-Seite erstellt wurde, muss die Seite im JS-Code initialisiert werden. So ein einfacher Diashow-Effekt ist fertig

wie unten gezeigt:

<div class="reveal" style="width:450px;height:300px;border: 1px solid #fff;margin:250px auto;">
    <div class="slides">
      <section>
        <h1>幻灯片1</h1>
        <p>幻灯片正文</p>
      </section>
      <section>
        <h1>幻灯片2</h1>
        <p>幻灯片正文</p>
      </section>
    </div>
  </div>
<script type="text/javascript" src="./reveal.js-master/js/reveal.js"></script>
<script type="text/javascript">Reveal.initialize();</script>

Das Effektbild sieht wie folgt aus:

So erstellen Sie einen Diashow-Effekt mit Javascript

Im Code ist ein Abschnitt eine Seite mit Folien. Wenn Sie einen weiteren Abschnitt in den Abschnitt einfügen, wird dieser als vertikale Folie angezeigt, wie in der Abbildung unten gezeigt

So erstellen Sie einen Diashow-Effekt mit Javascript

Wir können den Folien je nach gewünschtem Effekt auch Text, Bilder usw. hinzufügen. Die Farbe, der Stil usw. der Folien können geändert werden

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel kann jedem helfen, die Verwendung von JavaScript zum Erstellen von Folieneffekten zu erlernen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Diashow-Effekt mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verwenden Sie die Unshift-MethodeNächster Artikel：So verwenden Sie die Unshift-Methode

In Verbindung stehende Artikel

Mehr sehen