Sujet Précédent Sujet Suivant

Défilement petit souci surement bete

Mik4do Messages postés 13 Date d'inscription samedi 19 juillet 2003 Statut Membre Dernière intervention 4 octobre 2012 - 1 oct. 2012 à 13:23
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 1 oct. 2012 à 20:41
Bonjour à tous et toutes (et oui il y a des filles parmis nous !!) :-)

Sérieusement,

Je pense que ce code peut intéresser pas mal de personne (je mets tout le code, même le petit CSS) qui souhaite un défilement sans passer par un jquery.

[b]J'intègre dans une page web, un DIV de 200 pixel de large sur 250 de haut.
Dans ce cadre je fais défiler un tableau de 2000 pixel et ce tableau est décomposé de 10 cellules de 200 pixel de large. (1 seule ligne).
J'aimerais stoper l'animation automatiquement tous les 200 pixels et attendre 3 secondes, ensuite relancer l'animtion. L'animation se déplacer 1 pixel toutes les 30 ms.
En PHP j'aurais mis une condition if($i%200==0) mais là en javascript, je bloque.
Est ce quelqu'un peut m' aider ? /b


CODE CSS:

#cadrpg { width:200px; margin:0 auto; border:0; overflow:hidden;}
#newshr { position:relative; width:200px; height:250px; overflow:hidden; background:#FFFFFF; border:0px inset white; }
#defile { position:absolute; margin-top:0px; background-color:transparent; }


CODE HTML & JAVASCRIPT :





<?
/* PETITE BOUCLE PHP QUI RECUPERE LE CONTENU DANS UN TD et /TD // UN DIV serait pareil, mais j'aime bien les tableaux, je suis de l'ancienne école :-)
echo \"";
,
<? */
}
?>





<SCRIPT language="javascript">
var largimg=2000;
var largcadre=200;var hautcadre=280;
var act=1;
var gauche=0
var c = document.getElementById("newshr");

function defile()
{
gauche=gauche+1;
var haut=-5;
droite=largcadre+gauche;
bas=hautcadre+haut;
c.style.clip="rect("+haut+"px, "+droite+"px, "+bas+"px, "+gauche+"px)";
c.style.top=(-haut)+"px";
c.style.left=(-gauche)+"px";
if(gauche>largimg-560)gauche=0;
if(act==1) { setTimeout("defile()",10) }

}
defile();
</SCRIPT>


Merci, et j'espère que ce code va intéresser d'autres personnes.
Au départ il sert à faire défiler une phrase.

Merci
Mik4do

1 réponse

Réponse 1 / 1
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
1 oct. 2012 à 20:41
bonjour

il faudrait cree une variable qui serait incrementé de 1 a chaque cycle et quand cette variable est égale a 200 cela voudra dire que tu vient de te déplacé de 200px arrivé la tu réinitialise la variable a 0 tu met un setTimeout correspondant a la durée d'attente avant redémarrage et tu fait un return false pour arreter la fonction
0

Discussions similaires

Défilement automatique d'une page
cs_scls19fr -
DevDeb -

19 réponses
defilement automatique pdf en boucle
archerdu38 -
jordane45 -

3 réponses
Défilement automatique des pages d'un site ?
adelysnet -
flashfun -

1 réponse
Défilement d'image Automatique
cs_thomas1014 -
XelectroX -

6 réponses
Faire défiler des images avec un délai de 1 seconde
mailliam -
Mouckson -

3 réponses
Rejoignez-nous