begin process at 2010 03 19 10:35:22
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > VUE 360° SIMPLE

VUE 360° SIMPLE


 Information sur la source

Note :
8,33 / 10 - par 3 personnes
8,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :12 999 / 1 633
Auteur : abdoulax

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
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

Les Membres Club peuvent 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

 Sources du même auteur

Source avec Zip MINI MOTEUR DE TEMPLATE
Source avec Zip DIV APPARITION FUN
Source avec Zip BANNIÈRE, DIAPORAMA, FONDU, AJAX
Source avec Zip Source avec une capture SIMPLE ACCUEIL ANIMÉ
Source avec Zip Source avec une capture MENU DYNAMIQUE DÉROULANT W3C
Toutes les sources de abdoulax

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture DIAPO MULTIPLES EN FONDU par kazma
Source avec Zip Source avec une capture DEFILEMENT D'IMAGE PAR TABLEAU par kazma
Source avec Zip Source avec une capture DIAPOS MULTIPLES par kazma
Source avec Zip Source avec une capture DIAPO EN FONDU ENCHAINE par kazma

Commentaires et avis

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

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>

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

Commentaire de carate le 08/05/2007 15:48:46

extra super il est au top

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.

Commentaire de jypees le 07/08/2007 13:55:58

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

Commentaire de bobybx le 26/10/2007 12:12:33 10/10

utile!

HF

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

Comparez les prix


HTC Magic
Entre 429€ et 429€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo ciel d'orage 
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,295 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)