Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript

Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript_form-Spezialeffekten

WBOY

Freigeben： 2016-05-16 15:48:39

Original

1799 Leute haben es durchsucht

Folien werden häufig bei Produktvorführungen für Kunden verwendet. Der 360-Grad-Panoramabildeffekt bietet Benutzern einen guten Erlebniswert. Hier möchte ich Ihnen ein Tutorial zur Implementierung einer 360-Panorama-Diashow von Robert Pataki vorstellen. Dieses Tutorial verwendet js, um eine coole Panorama-Diashow zu implementieren. Der spezifische Inhalt ist wie folgt:

In diesem Tutorial werden keine Plug-Ins verwendet. Zur Implementierung verwenden wir natürlich auch das jQuery-Framework!

Wie erreicht man das?

Wir werden vorgenerierte 360-Grad-Bilder für das Karussell verwenden, um den Animationsanzeigeeffekt zu erzielen. Enthält 180 Bilder. Daher kann die Ladezeit länger sein.

Code-Implementierung

Wir werden dem CSS-Code Medienabfragen hinzufügen, damit dieser Effekt sowohl auf dem iPad als auch auf dem iPhone erzielt werden kann.

1. Codedatei

Wir fügen js-, css- und Bildverzeichnisse hinzu. Das CSS-Verzeichnis enthält reset.css. js enthält jQuery. Die Codedatei lautet wie folgt:

Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript_form-Spezialeffekten

2. Neue Projekte

Erstellen Sie eine HTML-Datei index.html. In

stellen wir den Darstellungsbereich des mobilen Geräts so ein, dass der Inhalt keine Skalierung unterstützt. Fügen Sie zwei Dateien hinzu

reset.css und threesixty.css. Enthält benutzerdefinierte CSS-Stile.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

3. Ladefortschrittsbalken

Erstellen Sie ein

, um die Diashow zu speichern. Es enthält ein

und ein zur Anzeige des Fortschrittsbalkens. Wir werden Javascript verwenden, um Bilder dynamisch zu laden.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
</body>
</html>

Nach dem Login kopieren

4. Interaktion hinzufügen

Am Ende des Codes fügen wir jQuery für die Interaktion und threesixity.js für die Verarbeitung von Bild-Diashows hinzu.

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/>
<title>360</title>
<linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/>
<linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/>
</head>
<body>
<divid="threesixty">
<divid="spinner">
<span>0%</span>
</div>
<olid="threesixty_images"></ol>
</div>
<scriptsrc="js/heartcode-canvasloader-min.js"></script>
<scriptsrc="js/jquery-1.7.min.js"></script>
<scriptsrc="js/threesixty.js"></script>
</body>
</html>

Nach dem Login kopieren

5. Stil

Wir fügen die Datei threesixty.css hinzu. reset.css wird verwendet, um den Standardstil festzulegen. Definieren Sie zunächst den #ThreeSixty-Wrapper. Die Standardbild-Diashow ist 960 x 450. Horizontal und vertikal zentriert.

#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p

Nach dem Login kopieren

Im obigen Inhalt geht es um die Verwendung von Javascript zum Erstellen einer Diashow. Ich hoffe, dass es Ihnen gefällt.