VUE 360° SIMPLE
Utilisateur anonyme
-
7 mai 2007 à 19:14
h405 Messages postés 7 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 28 février 2011 - 28 juil. 2008 à 21:47
h405 Messages postés 7 Date d'inscription vendredi 27 juin 2008 Statut Membre Dernière intervention 28 février 2011 - 28 juil. 2008 à 21:47
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/42608-vue-360-simple
https://codes-sources.commentcamarche.net/source/42608-vue-360-simple
28 juil. 2008 à 21:47
j'aime bien le défilement doux non agressif.
merci
26 oct. 2007 à 12:12
HF
7 août 2007 à 13:55
18 mai 2007 à 21:33
j'utilise a peu prés la meme chose sur
http://donnemariedontilly.free.fr/vdd
du coup le plus long c'est de faire les images 360°
merci a vous pour votre travail.
8 mai 2007 à 15:48
8 mai 2007 à 13:32
En tout cas le résultat est vraiment interressant, avec très peu de code on arrive à un résultat semblable à celui d'une animation flash.
Vivele JavaScript :p (bon vive le flash aussi)
Have fun
8 mai 2007 à 10:52
Perso j'ai regardé le code et j'ai quelques modifs à proposer...
Le problème principal de cette source est qu'elle n'est pas orientée objet.
Donc on a droit à des variables globales et on ne peut pas l'instancier plusieurs fois sur la même page.
Mais pour faire tout ça ya déjà ma source OO : http://www.javascriptfr.com/codes/AFFICHAGE-PANORAMA-360-JAVASCRIPT-ORIENTE-OBJET-YAJEVLE_41070.aspx
L'objectif de cette source était donc (je pense) de fournir une version plus légère de ma source.
J'ai donc fait quelques modifs pour l'améliorer :
- utilisation de classe CSS : permet de séparer le contenu de la mise en forme
- suppression des appels multiples à document.getElementById : gain de performance
- ajout de variables pour customizer tout ça (pas + temps) :-)
- correction d'une erreur minime dans la fonction move (calcul pos AVANT)
- homogénéisation du code avec utilisation du préfixe vue360_
@+
Le code (tout dans le même fichier)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="abdoulax & mod by ralecul :-)" />
<title>Vue 360°</title>
<style type="text/css" media="screen">
#vue360
{
height: 100px;
width: 400px;
}
.vue360_droite
{
color: #80150c;
background: #FFF;
border: solid 1px #5f1b15;
font-size: 30px;
position: absolute;
margin: 30px 0 0 -20px;
}
.vue360_gauche
{
color: #80150c;
background: #FFF;
border: solid 1px #5f1b15;
font-size: 30px;
position: absolute;
margin: 30px 0 0 400px;
}
</style>
</head>
<script type="text/javascript">
var vue360_pos = 0; // position du panorama en pixel
var vue360_sens = -1; // sens de rotation
var vue360_temps = 100; // intervalle de temps en ms entre chaque déplacement
var vue360_pas = 10; // déplacement unitaire en pixel
setInterval('vue360_move()', vue360_temps);
function vue360_move()
{
vue360_pos += vue360_sens * vue360_pas;
document.getElementById("vue360").style.backgroundPosition = vue360_pos + "px";
}
var vue360_str = "<";
vue360_str += ">";
var vue360 = document.getElementById("vue360");
vue360.style.marginLeft = "auto";
vue360.style.marginRight = "auto";
vue360.style.overflow = "hidden";
vue360.style.background = "url(img360.jpg) repeat";
vue360.style.border = "solid 1px #5f1b15";
vue360.innerHTML = vue360_str;
</script>
</html>
7 mai 2007 à 19:14
J'ai pas regardé le code mais le résultat est plutôt pas mal...
C'est vrai que ca ressemble beaucoup plus à un bandeau qui défile qu'a de la vision 3D mais bon...
Adelami