AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 01 09 22:30:33
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

VUE 360° SIMPLE


Information sur la source

Catégorie :Effets Classé sous : vue, 360, diaporama Niveau : Débutant Date de création : 07/05/2007 Date de mise à jour : 08/05/2007 13:37:45 Vu / téléchargé: 9 965 / 1 339
Auteur : abdoulax Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
8,33 / 10 - par 3 personnes
8,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Voici une vue 360° réalisé en JavaScript. Je me suis inspiré de certaine sources du site pour faire ce script.
 

Conclusion

Have Fun
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

08 mai 2007 13:37:45 :
Modification apporté par RALECUL... Merci

Commentaires et avis

signaler à un administrateur
Commentaire de adelami le 07/05/2007 19:14:11

Bonjour,
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

signaler à un administrateur
Commentaire de ralecul le 08/05/2007 10:52:18

Bonjour,

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>
<body>
<p id="vue360">
<img src="img360.jpg" alt="vue 360" />
</p>

<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  = "<span onmouseover='vue360_sens = 1' class='vue360_droite'>&lt;</span>";
vue360_str += "<span onmouseover='vue360_sens = -1' class='vue360_gauche'>&gt;</span>";

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>

</body>
</html>

signaler à un administrateur
Commentaire de abdoulax le 08/05/2007 13:32:09

Excelent, en effet je me suis bien inspiré de ce que tu avais fait!! J'avais réalisé ce script pour un site web qui comporté qu'une seul vue 360°, c'est pour cette raison que je n'ai poa cherché à faire de l'objet.

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

signaler à un administrateur
Commentaire de carate le 08/05/2007 15:48:46

extra super il est au top

signaler à un administrateur
Commentaire de zorro77 le 18/05/2007 21:33:10

bien,
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.

signaler à un administrateur
Commentaire de jypees le 07/08/2007 13:55:58

tout con et vraiment bon :) moi j'adore (a)

signaler à un administrateur
Commentaire de bobybx le 26/10/2007 12:12:33 10/10

utile!

HF

signaler à un administrateur
Commentaire de h405 le 28/07/2008 21:47:05 8/10

voilà un truc pour moi qui suis nul.
j'aime bien le défilement doux non agressif.
merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Diaporama javascript [ par standoff ] SVP!!! configurer diaporama [ par el gringo ] Bonjour à tous,Je développe actuellement mon site internet et afin de présenter mes différentes illustrations j'aimerais inclure des diaporamas.Malheu diaporama [ par jcb54 ] bonjourqui pourra me depanner je viens de copier un script sur jejavascript et je suis bloquer sur la premiere image je ne comprend pas bien la fonct Controle SlideShow [ par Miloflyer ] Bonjours a tous. J'ai trouver cet bribe de code qui permet de faire une sorte de petit diaporama avec des photos, mais j'aimerai l'adapter... J'aimera diaporama [ par morgandetoi06 ] bonjour, j ai voulu faire un diaporama en PHP/JSmaius il ne marche pas et je ne voit pas pksvp aidez moi: voila le code que j ai fait merci de me donn lien sur photos en javascript [ par missFlo17 ] Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p Diaporama dans une page web [ par Winnieptitourson ] Sur mon site j'ai mis un diaporama dans une page web.Mais il parait que ça fonctionne pas avec tous les navigateurs.Quelqu'un a-t-il une solution ?htt Diaporama 3D [ par walimoha ] J'ai installé le diaporama 3D, mais le nombre d'image est limité à 12 et il n'ya pas moyen d'en rajouter! Comment faire pour pouvoir afficher plusieur Problème avec les caractères spéciaux ! [ par Ruffneck2045 ] Bonjour, j'ai cr&#233;er un diaporama &#224; l'aide&nbsp;de php &amp; javascript et j'ai un petit probl&#232;me.En cliquant sur une image du diaporama !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (tr&#232;s int&#233;ressant).Voil&#224;, je recherche un script pour mes pages album photos.Mais comme j'ai


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,312 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.