recherche

Maison >interface Web >js tutoriel >Créez un diaporama (image panoramique à 360 degrés) avec des effets spéciaux javascript_form

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

WBOY
WBOYoriginal
2016-05-16 15:48:391800parcourir

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>

3. Chargement de la barre de progression

Créez un

pour contenir le diaporama. Il contient un
    pour contenir la séquence d'images
  1. 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>

    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>

    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

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un super guide de programmation avec Browserify avec jQuery_jqueryArticle suivant：Un super guide de programmation avec Browserify avec jQuery_jquery

Articles Liés

Voir plus