Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript

Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript_form

WBOY

Libérer： 2016-05-16 15:48:39

original

1799 Les gens l'ont consulté

Les diapositives sont souvent utilisées lors des démonstrations de produits aux clients. L'effet d'image panoramique à 360 degrés apporte une bonne expérience aux utilisateurs. Ici, je voudrais vous présenter un didacticiel de mise en œuvre d'un diaporama panoramique 360 de Robert Pataki. Ce didacticiel utilise js pour implémenter un diaporama panoramique sympa. Le contenu spécifique est le suivant :

Aucun plug-in n'est utilisé dans ce tutoriel. Nous utiliserons HTML, CSS et Javascript pour l'implémenter. Bien entendu, nous utilisons également le framework jQuery !

Comment y parvenir ?

Nous utiliserons des images pré-générées à 360 degrés pour le carrousel afin d'obtenir l'effet d'affichage de l'animation. Contient 180 images. Le temps de chargement peut donc être plus long.

Mise en œuvre du code

Nous ajouterons des requêtes multimédias au code CSS afin que cet effet puisse être obtenu à la fois sur iPad et iPhone.

1. Fichier de codes

Nous ajoutons les répertoires js, css et image. Le répertoire css contient reset.css. js contient jQuery. Le fichier de code est le suivant :

Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript_form

2. Nouveaux projets

Créez un fichier HTML index.html. Dans

, nous définissons la fenêtre d'affichage de l'appareil mobile afin que le contenu ne prenne pas en charge la mise à l'échelle. Ajoutez deux fichiers

reset.css et threesixty.css. Contient des styles CSS personnalisés.

<!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>

Copier après la connexion

3. Chargement de la barre de progression

Créez un

pour contenir le diaporama. Il contient un

et un pour afficher la barre de progression. Nous utiliserons javascript pour charger dynamiquement les images.

<!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>

Copier après la connexion

4. Ajouter une interaction

À la fin du code, nous ajoutons jQuery pour gérer les interactions et threesixity.js pour gérer les diaporamas d'images.

<!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>

Copier après la connexion

5. Style

Nous ajoutons le fichier threesixty.css. reset.css est utilisé pour définir le style par défaut. Définissez d’abord le wrapper # threesixty. Le diaporama d'images par défaut est de 960 x 450. Centré horizontalement et verticalement.

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

Copier après la connexion

Le contenu ci-dessus concerne l'utilisation de javascript pour créer des diaporamas. J'espère qu'il vous plaira.