Texte défilant en boucle

Messages postés
10
Date d'inscription
samedi 27 novembre 2004
Statut
Membre
Dernière intervention
13 mai 2009
- - Dernière réponse : 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
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.

@++
Afficher la suite 

7 réponses

Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49
0
Merci
bonjour

il marche pas du tout le code
Commenter la réponse de @karamel
Messages postés
10
Date d'inscription
samedi 27 novembre 2004
Statut
Membre
Dernière intervention
13 mai 2009
0
Merci
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>
Commenter la réponse de SoundBoy771
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49
0
Merci
la methode est pas tres bonne

essai ceci tu m'en dira des nouvelles

<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'
var reel=''
function win(){

reel=reel.slice(1,reel.length)+reel.slice(0,1)
document.getElementById('cloc').firstChild.nodeValue=reel

if (reel==""){
reel=texte
}
setTimeout("win()",100)
}
//-->
</script>
</head>

texte defilant


</html>
Commenter la réponse de @karamel
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49
0
Merci
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>
Commenter la réponse de @karamel
Messages postés
10
Date d'inscription
samedi 27 novembre 2004
Statut
Membre
Dernière intervention
13 mai 2009
0
Merci
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 ]
Commenter la réponse de SoundBoy771
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49
0
Merci
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  ???
Commenter la réponse de @karamel
Messages postés
1
Date d'inscription
lundi 19 décembre 2011
Statut
Membre
Dernière intervention
19 décembre 2011
0
Merci
@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.
Commenter la réponse de erico29