Bonjour à tous, Je galère depuis un moment maintenant sur un petit bout de code que je n'arrive pas a faire évoluer. <script type="text/javascript"> var defile; var posInit = 1200; var pscrnt = posInit; var vitesse = -0.3; function texteDefile() { if (!defile) { defile = document.getElementById('defile'); } if (defile) { if(pscrnt < ( - defile.offsetWidth) ){ pscrnt = posInit; } else { pscrnt+= vitesse; } defile.style.left = pscrnt+"px"; } } setInterval('texteDefile()',5); </script> Mon texte défilant | Mon texte défilant | Mon texte défilant | Mon texte défilant | Mon texte défilant | Mon texte défilant | Il fonctionne pas mal mais ce que j'aimerai c'est que le texte tourne en boucle sans s'arrêter, sans blanc entre les passages. Le but est que à terme, on ne vois pas ou le texte commence et ou il fini. Merci d'avance pour votre aide. @++

bonjour il marche pas du tout le code

Javascript / DHTML : Texte défilant en boucle

Réponse 2 / 7

SoundBoy771 Messages postés 10 Date d'inscription samedi 27 novembre 2004 Statut Membre Dernière intervention 13 mai 2009
12 mai 2009 à 16:29

doups autant pour moi, j'ai oublié le css -_-. Je l'ai retapé trop vite, excusez-moi.

Voici le code fonctionnel :

<html>
    <head>
        <style type="text/css">
            .defileScroll {
                cursor:default;
                background-color:pink;
                position:relative;
                width:100%;
                height:25%;
                overflow:hidden;
                color:inherit;
            }

            .defile {
                cursor:default;
                font-size:15pt;
                color:black;
                font-family:arial;
                width:2000px;
                position:absolute;
                margin-top:1px;
                background-color:transparent;
            }
        </style>

        <script type="text/javascript">

            var defile;// l'element a deplacer
            var posInit = 1200; // position horizontale de depart
            var pscrnt = posInit;
            var vitesse = -0.3;

            function texteDefile() {

                if (!defile) {
                    defile = document.getElementById('defile');
                }

                if (defile) {

                    if(pscrnt < ( - defile.offsetWidth) ){
                        pscrnt = posInit;
                    }
                    else {
                        pscrnt+= vitesse; // pixel par deplacement
                    }
                    defile.style.left = pscrnt+"px";
                }
            }

            setInterval("texteDefile()",5); // delai de deplacement

        </script>
    </head>




Ceci est un texte défilant.!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!




</html>

Réponse 3 / 7

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
12 mai 2009 à 21:41

la methode est pas tres bonne

essai ceci tu m'en dira des nouvelles

<html>
<head>
<title>exemple</title>
<script language="JavaScript">

</script>
</head>

texte defilant

</html>

Réponse 4 / 7

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
13 mai 2009 à 10:38

la c'est mieux

<html>
<head>
<title>exemple</title>
<script language="JavaScript">
var texte=' texte defilant texte defilant texte defilant texte defilant texte defilant texte defilant texte defilant texte defilant'
function win(){
texte=texte.slice(1,texte.length)+texte.slice(0,1)
document.getElementById('cloc').firstChild.nodeValue=texte
setTimeout("win()",100)
}
</script>
</head>

texte defilant

</html>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 7

SoundBoy771 Messages postés 10 Date d'inscription samedi 27 novembre 2004 Statut Membre Dernière intervention 13 mai 2009
13 mai 2009 à 14:08

merci beaucoup pour ces réponses kazma.

Cependant, j'étais déjà tombé sur ce genre de code, et je ne le trouve pas fluide à coté de celui que j'ai posté.

C'est pour ça que je parlais d'optimisation de mon code, afin de conserver la fluidité.

Es-ce possible à ton avis ?
[../auteur/KAZMA/1390349.aspx ]

Réponse 6 / 7

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
13 mai 2009 à 16:01

tu pourait mettre plusieurs span comportant le meme texte dans un div principale en overflow hidden quand tu demarre tu fait avancer les div comme tu le fait actuellement et quand le premier div disparait totalement de l'ecran tu le retire tu decale les div de la taille du div a droite et tu remet le div que tu vient d'extraire en amon. c'est le meme principe que ce que je t'ai mis avant reste a savoir si au moment de retrait du div ca sacadera pas.

en gros c'est un peut galere mais peut qu'il y a une solution plus simple ???

Réponse 7 / 7

erico29 Messages postés 1 Date d'inscription lundi 19 décembre 2011 Statut Membre Dernière intervention 19 décembre 2011
19 déc. 2011 à 17:51

@SoundBoy771
Salut! Je ne suis pas expert en javascript, mais je trouve que ton script de défilement du texte est intéressant, car il à l'avantage d'utiliser les éléments html présents dans la page au lieu de les créer en javascript; ce qui est optimal pour le référencement et les normes d'accessibilité (pour les malvoyants et pour les moteurs de recherches). De plus, le défilement est assez fluide!

Je l'utilise pour faire défiler plusieurs messages dans des listes à puces disposées en fer à gauche (comme pour les menus horizontaux).

Un inconvénient tout de même: il est un peu saccadé par moments; la fluidité n'est pas parfaite... On dirait qu'il met du temps à charger certains éléments.

Si il y a eu des améliorations sur ce script, ou si vous en connaissez d'autres, tenez-moi au courant!
Merci.

Texte défilant en boucle

7 réponses

Votre réponse

Discussions similaires