IMAGES DÉFILANTES EN JAVASCRIPT (SCROLLING IMAGES)
DarkC0
Messages postés
51
Date d'inscription
dimanche 13 mars 2011
Statut
Membre
Dernière intervention
11 septembre 2011
-
9 avril 2011 à 07:47
sanamarrakech - 9 nov. 2012 à 16:32
sanamarrakech - 9 nov. 2012 à 16:32
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/53040-images-defilantes-en-javascript-scrolling-images
https://codes-sources.commentcamarche.net/source/53040-images-defilantes-en-javascript-scrolling-images
9 nov. 2012 à 16:32
9 juil. 2012 à 09:00
Sur mon site
http://www.william-voirol.ch/Prog/
une nouvelle version est installée depuis une année.
Malheureusement, j'ai oublié de mettre à jour certains codes de Codes-SourceS.
Voilà qui est fait.
Milles excuses …
8 juil. 2012 à 18:28
28 juil. 2011 à 09:16
J'ai repris mon code pour essayer d'éviter d'utiliser des valeurs tels que
- window.innerWidth
- document.body.offsetWidth
qui dépendent du navigateur.
Je suis arrivé à une solution nettement plus simple et plus conviviale:
- On peut définir librement la position et la hauteur
de la zone des images défilantes (div: id='imd').
- Le défilement s'arrête lorsqu'on survole la zone avec la souris.
- Le nom de l'image s'affiche lorsque qu'on la survole.
Merci pour toutes vos remarques et successions.
Test direct:
http://www.william-voirol.ch/TP/Images%20defilantes
Prochainement, je ferai une mise à jour du code source
(également pour le défilement vertical).
William
27 juil. 2011 à 05:14
30 juin 2011 à 21:00
je trouve superbe vos codes, mais j'ai un petit probleme, j'ai essaye sur mon application, ca a marche sur OPERA, FIREFOX tres bien, mais, sur explorer7, ca ne fonctionne pas tres, bien, g remplacex par px dans la ligne 25 du code, ca marche toujours pas. aidez moi STP
Samuel St Louis
20 juin 2011 à 12:22
Une autre idée serai de faire disparaître l'image avec un fade-out ou d'utiliser un scroll overflow ;-)
Voilà, amuse toi bien
14 juin 2011 à 15:35
Je trouve cela super. Ca répond en partie à ce que je souhaitais dans ma page, si ce n'est que j'aurai souhaité faire défiler mes images de haut en bas. En effet j'ai un menu centré sur ma page et pour des questions estéthiques le défilement serai idéale sur un des cotés de la page.
Quel serais les modifications à apporter à ton code pour réaliser cela ?
En tous cas bravo.
7 juin 2011 à 13:24
Pour ouvrir une page spécifique lors d'un click sur une image, on peut par exemple remplacer la fonction Clk(i) par:
function Clk(i) {
window.open('page'+i+'.html');
}
et créer dans le dossier principal, les 9 fichiers (si nIma=9):
page0.html, page1.html, ..., page8.html
qui contiennent le code:
<html>
<head>
<title>Page ?</title>
</head>
Page ?
</html>
Ce code de test est rudimentaire et les '?' sont à remplacer par 0,1,..,8 respectivement.
Il serait également bon d'étudier les autres paramètres de la fonction 'window.open' pour ouvrir une nouvelle fenêtre convenable.
W. Voirol
11 mai 2011 à 14:28
merci
cordialement
Robert
30 avril 2011 à 19:50
Effectivement, l'ajout de 'px' dans le style de l'image fait que votre script fonctionne correctement sous IE9 et FIREFOX 4
avec le type de doctype suivant : DTD XHTML 1.0 Transitional.
Merci pour cette rectification.
Bravo pour votre contribution.
Cordialement.
30 avril 2011 à 13:29
25. e=ima[i++]; e.style.left=x; e.style.display='block';
A remplacer par:
25. e=ima[i++]; e.style.left=x+'px'; e.style.display='block';
C'est-à-dire qu'il faut ajouter l'unité 'px' à style.left.
Toutes mes excuses ...
15 avril 2011 à 16:36
11 avril 2011 à 22:11
J'ai un petit soucis avec votre script.
Lorsque je mets le type de "Doctype" (<!DOCTYPE... >) le script ne fonctionne plus.
Les instructions HTML sont bien générées mais la valeur du Left: dans l'instruction CSS "Style" est à zero px.
Auriez vous une idée de correction?
Merci.
11 avril 2011 à 09:06
note:9/10
9 avril 2011 à 11:51
Merci beaucoup !!!
9 avril 2011 à 08:45
Dans la ligne 41.
le second paramètre (ici 50) représente le "temps de pause"
en millisecondes entre les appels à la fonction Nxt().
Description de 'setInterval' par exemple sous: http://fr.selfhtml.org/javascript/objets/window.htm
Dans la ligne 15. if ((xx-=2) <= -xIma) {
Le 2 est le décalage (en pixels) à chaque appel à Nxt().
Il est donc possible de varier la vitesse de défilement des images en adaptant ces deux valeurs.
9 avril 2011 à 07:47
J'ai regardais ton code et il est super, justement je cherchais le moyen de faire défiler des images pour un jeu que je veux faire en html et c'est pile poil ce qu'il me faut.
Par contre serait il possible de rajouter une ligne pour modifier la vitesse de défilement ?