begin process at 2012 02 09 16:47:48
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs Amusants

 > ROTATION DES ÉLÉMENTS D'UN PAGE WEB

ROTATION DES ÉLÉMENTS D'UN PAGE WEB


 Information sur la source

Note :
8,25 / 10 - par 4 personnes
8,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Classé sous :rotation, 360 Degré, élément, page, web Niveau :Expert Date de création :06/10/2008 Date de mise à jour :06/10/2008 21:19:59 Vu :9 539
Auteur : yoyo17560

Ecrire un message privé
Commentaire sur cette source (26)
Ajouter un commentaire et/ou une note

 Description

Je sais que le titre n'est pas très approprier, car ce javascript reprend tous les éléments d'un page web (image et logo) pour les afficher en 360°. Si vous ne comprenez pas mon baratin, essayer directement le javascript en le collant dans l'URL du navigateur.

Source

  • Essayer directement le javascript en le collant dans l'url du navigateur directement sur le site codes-sources par exemple:
  • javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',50); void(0);
Essayer directement le javascript en le collant dans l'url du navigateur directement sur le site codes-sources par exemple:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval('A()',50); void(0);

 Conclusion

Ce javascript n'est pas de moi et un peu compliquer pour ma petite tête, je l'ai trouver sur site allemend et je souhaiter le partager avec la communauté codes-sources.


 Historique

06 octobre 2008 21:19:59 :
Fautes d'orthographe (!!!)

 Sources du même auteur

Source avec Zip OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U...
Toutes les sources de yoyo17560

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol
Toutes les sources de la catégorie Trucs Amusants

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip Source avec une capture CSS3 TRANSFORM par kazma
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
Source avec Zip Source avec une capture PAGES EFFET MOBILE TACTILE... par sitajony
Source avec Zip Source avec une capture RAINBOW CURSOR par wackybacky

Commentaires et avis

Commentaire de kazma le 06/10/2008 22:04:14 administrateur CS

bonjour
en gros le script recherche toutes les image se trouvant sur la page puis leurs donne un position absolue et pour la suite c'est une histoire de trigo associe a setinterval. très intéressant tous ça demande a etre étudie de près

Commentaire de lakichemole le 07/10/2008 09:29:31 5/10

ça donne la gerbe ^^. Mais j'aime le concept :)

Commentaire de gillardg le 07/10/2008 11:04:11

superbe effet , merci

Commentaire de gillardg le 07/10/2008 11:10:00

pourrais tu m'expliquer comment integrer ce script dans ma page ??
car je vois pas comment faire.
le top évidement ce serait que tu donnes un exemple de page html :)

Commentaire de yoyo17560 le 07/10/2008 21:41:39

exacte Kazma, ta tout juste, mais ca reste assez compliquer; pour Gillardg ce script ne peut pas s'integrer dans une page html ou php... car il est interprêter par le navigateur a faire l'action directement sur la page web, a moins de mettre un lien vers ce script. Le fonctionnement de ce cript e simple et compliquer a la fois, je sais je me repete (!)

Commentaire de yoyo17560 le 07/10/2008 21:44:47

je me corrige !:
"...a moins de mettre un lien vers ce script" sur ta propre page html ou modifier le javascript, mais moi non plus je ne vois pas trop commment faire.

Commentaire de JJDai le 07/10/2008 23:21:57 9/10

Je l'aurais plutôt appelé "Farandole".
En tout cas super.
JJDAI

Commentaire de gillardg le 07/10/2008 23:22:31

j'y connais rien mais il doit bien y avoir des events
genre "window on load" ou "page loaded"

Commentaire de JJDai le 07/10/2008 23:38:51

a mon avis il suffit de copier le code dans une page html entre les balises <script language=javascript>  et  </script> et ca doit marcher.
pluto vers la fin de la page une fois que tous le objets sont chargés juste avant le </body>.
JJDAI

Commentaire de gillardg le 07/10/2008 23:45:04

j'ai éssayé ça marche pas :(

Commentaire de abdelaziz_info le 08/10/2008 05:28:41 10/10

Bonjour,


Voila (GILLARDG) deux exemples pour introduire le code dans tes pages ;
Si tu veux déclancher le phénomène automatiquement après le chargement de la page Tu remplace la balise body par celle-ci ou seulement  tu y ajoute l'évènement onload="."

<body onload="document.location.href='javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=\'absolute\'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval(\'A()\',50); void(0);'">


Ou  aussi ajouter l'évènement onclick="..." ou pour aller plus vite onmouseover="..." à un lien ou un autre objet:

<a onclick="document.location.href='javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(%22img%22); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=\'absolute\'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+%22px%22; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+%22px%22}R++}setInterval(\'A()\',50); void(0);'" target="_self" href="#">Cliquer ICI</a>

Commentaire de PetoleTeam le 08/10/2008 05:29:05

Bonjour,
il faut remplacer le %22 par de " dans le code...
cela donne
<script type="text/javascript">
R = 0;
x1 = .1;
y1 = .05;
x2 = .25;
y2 = .24;
x3 = 1.6;
y3 = .24;
x4 = 300;
y4 = 200;
x5 = 300;
y5 = 200;
DI = document.getElementsByTagName( "img");
DIL = DI.length;
function A() {
  for (i = 0; i - DIL; i++) {
    DIS = DI[i].style;
    DIS.position = 'absolute';
    DIS.left = (Math.sin(R * x1 + i * x2 + x3) * x4 + x5) + "px";
    DIS.top = (Math.cos(R * y1 + i * y2 + y3) * y4 + y5) + "px";
  }
  R++
}
setInterval('A()', 50);
void(0);
</script>

Commentaire de gillardg le 08/10/2008 10:50:27

j'ai reçu plusieurs mails :
Ce mail a ete envoye a votre demande depuis le site JavascriptFR.com
pour vous avertir qu'un nouveau commentaire a ete ajoute sur la source :
ROTATION DES ÉLÉMENTS D'UN PAGE WEB
http://www.javascriptfr.com/code.aspx?ID=48133

heu ils sont ou les nouveaux  commentaires

Commentaire de gillardg le 08/10/2008 10:54:21

abdelaziz_info  merci de ton aide précieuse
c'est un bug ou quoi? il y a des fois ou je n'ai pas toute la page (les derniers messages postés)

Commentaire de coucou747 le 08/10/2008 10:54:31 administrateur CS

abdelaziz_info, pour executer du javascript, on a mieux que :
window.location.href="javascript:

(et c'est pas document.location...)

Commentaire de yoyo17560 le 08/10/2008 14:27:03

dans ces cas la, il faut réactualiser la page a cause du cache du navigateur et sa devrait marchait (logiquement !)

Commentaire de nickadele le 10/10/2008 15:06:47 administrateur CS

GILLARDG,
c'est normal, c'était au moment des changements des serveurs.

Nickadele

Commentaire de gillardg le 10/10/2008 15:22:35

@yoyo17560 ctrl+R  > puis effacé tous les fichiers internet temp puis recommencé
mais quand ça déconne msgbox(erreur 6)??

merci Nickadele
je me dissais bien que c'était pas comme dab
ouf ç'est bon maintenant tout tourne (presque ) parfaitement

Commentaire de Kimjoa le 10/10/2008 21:38:32

sinon y a mon script  http://www.javascriptfr.com/codes/DYNAMIQUE-JS-FAIRE-JOLIE-ANIMATION_47712.aspx , carrement plus propre a vous de voire bye

Commentaire de mnouzahir le 13/10/2008 13:18:49

superbe!!
merci yoyo

Commentaire de mahlaoui le 13/10/2008 14:51:16 9/10

Many Thanks

Commentaire de ILlumiNE le 15/10/2008 23:27:12

Salut yoyo17560! Je ne veux pas insulter ton intelligence, mais c'es-tu vraiment toi qui a écrit le script, j'en doute, j'en ai un semblable qui date de 3 ans.j'lappel le serpent. tien le voici...  javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.8;y3=.24; x4=30; y4=200; x5=30; y5=200;DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;DIS.position='absolute'; DIS.left=(R*x1+i*x2+x3)*x4+x5;DIS.top=Math.cos(R* y1+i*y2+y3 )*y4+y5}R++}setInterval('A()',5); void(0);




a oui j'oubliais mon TGV..       javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6;y3=.24; x4=300; y4=200; x5=300; y5=200;DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;DIS.position='absolute'; DIS.left=(R* y1+i*y2+y3 )*y4+y5}R++}setInterval('A()',5); void(0);  




bon b'en à la prochaine...  sans rancune  yoyo!!    
((___))
[ x x ]
\   /    cDc
(' ')
  (U)

Commentaire de yoyo17560 le 23/10/2008 21:29:36

A Illumine >> Tu es sur que tu as lut la conclusion ? ^^, je dis clairement que ce n'est pas moi qui a fait cette source et que je l'ai vue sur un site "Deutsch" et que je l'ai poster ici même.
Voilà, c'est tout.

a+

Commentaire de jooraX le 16/12/2008 23:35:34

tiens c'est bien marrant!

Je l'ai intégré juste pour le fun sur la page :
http://all-crash.fr/

clic droit = mouvement
re clic droit = pause!

Pour se faire :
____________________________________
<body oncontextmenu="crazyIMG()">
____________________________________

puis à la fin du body :

____________________________________
<script type="text/javascript">
var crazy = "off";
function crazyIMG(){
if (crazy=="off"){
cricri=setInterval('A()', 50);
void(0);
crazy="on";
return false;
}else{
clearInterval(cricri)
crazy = "off";
}
}
R = 0;
x1 = .1;
y1 = .05;
x2 = .25;
y2 = .24;
x3 = 1.6;
y3 = .24;
x4 = 300;
y4 = 200;
x5 = 300;
y5 = 200;
DI = document.getElementsByTagName( "img");
DIL = DI.length;

function A() {
  for (i = 0; i - DIL; i++) {
DIS = DI[i].style;
DIS.position = 'absolute';
DIS.left = (Math.sin(R * x1 + i * x2 + x3) * x4 + x5) + "px";
DIS.top = (Math.cos(R * y1 + i * y2 + y3) * y4 + y5) + "px";
  }
  R++
}
</script>
____________________________________

Commentaire de ILlumiNE le 17/12/2008 02:40:22

Hey  jooraX tu as fais une bien belle page, BRAVO!!! ca donne un bon effêt.

Commentaire de lakichemole le 17/12/2008 08:58:56

J'ai plutot envie de vomir ^^

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Comment peut-on savoir la taille d'un élément de la page web? [ par b20n00 ] Salut, tout le monde. Je veux juste savoir comment peut-on savoir la taille d'un élément de la page web comme image, table ligne, cellule, frame ou d problème d'affichage de ma page web sous IE8 [ par sandymen ] Bonjour, Depuis que j'ai inséré un diaporama sur ma page web, j'ai un problème d'affichage sous IE8. Du coup, mon fichier DWT sous dreamweaver modifié integrer camera videosurveillance dans page web [ par aymenrz ] [b][i]Bonjour a tous[/i][/b] j'ai un stage d'été, et selon mon sujet, je veux integré une camera de vidéosurveillance (IP) dans une page web , mais se Traduction de page web ...? [ par jeanmorelle ] Bonsoir, Je suis en train de construire un site web en français. Sur la page d'accueil, j'ai mis une image du drapeau anglais. Comment faire pour que [BAR]code commentaire pour ma page web [ par amargabaamrane ] je cherche un code simple pour que les visiteurs de mon site puissent commenter mes sujets de mes [^^mad2][^^pirate]page Envoyer et récupérer un champ texte de formulaire entre une page Web et fichier XML? [ par alain8225 ] Salut à tous, J'ai créé une page Web dans laquelle j'ai placé un formulaire contenant des champs TEXT. L'utilisateur entre ses données qui sont enreg lien controle + controle - pour agrandir reduire une page web dans le navigateur [ par grainedepub ] bonjour je cherche un créer un lien qui agrandirait ou réduirait la page web dans le navigateur ce qui est équivalent à controle - controle + sur pc e Page web avec telnet de différents switchs [ par maxredphenix ] Bonjour, J'espere que je suis dans le bon forum. Il y a dans mon entreprise plusieurs switch cisco (2950, 2940) et des modems allied telesys. Je so acceder a une bade SQLite depuis une page web via javascript. [ par fbsandman ] Bonjour à tous, Je débute en programmation html/javascript et donc, fatalement, je me retrouve un peu bloqué. En fait ce que je voudrais faire c'est c Intégrer une camera IP dans une page Web???? [ par yipikai ] Bonjour à tous,Je m'excuse par avance, je débute dans la matière....Voila je cherche à intégrer le flux d'une camera IP dans une page web. Actuellemen


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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 : 9,766 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)