suchen

Heim >Web-Frontend >js-Tutorial >Erstellen Sie eine Diashow (360-Grad-Panoramabild) mit javascript_form-Spezialeffekten

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

WBOY
WBOYOriginal
2016-05-16 15:48:391806Durchsuche

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>

3. Ladefortschrittsbalken

Erstellen Sie ein

, um die Diashow zu speichern. Es enthält ein
    zur Aufnahme der Bildsequenz
  1. 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>

    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>

    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

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

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：Ein super Leitfaden zum Programmieren mit Browserify mit jQuery_jqueryNächster Artikel：Ein super Leitfaden zum Programmieren mit Browserify mit jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen