Texte défilant ( boutons : arrêt - pause - avant - arrière et feuille de style ) ( à upgrader à volonté )

Soyez le premier à donner votre avis sur cette source.

Vue 22 523 fois - Téléchargée 1 265 fois

Télécharger le projet
Commenter

Description

Un texte qui défile de bas en haut avec un bouton d'arrêt et un bouton continuer.......
Attention ce script ne fait pas réapparaitre le texte quand il est passé hors champ.
Portabilité et modifications effectuées ....

Visitez mon portail et n'hésitez pas à me donner des idées pour le modifier.....votre avis m'intéresse !!

http://debbog.free.fr/

Source / Exemple : 


/*************************************/
/*** Intégration du javascript     ***/
/*************************************/

  var y        = 0;
  var minuteur = null;
  var temps    = 10;

  //minuteur défilement en avant du texte
  function transfert()
  {
     minuteur=setInterval('defil()',temps);
  }
  //minuteur défilement en arriere du texte
  function transfertBis()
  {
     minuteur=setInterval('retourArriere()',temps);
  }
  function defil()
  {
    document.getElementById('texteDefil').style.top = y--;
    document.getElementById('compteur').value = y;
    
  }
  //Retour en arriere du texte
  function retourArriere()
  {
    document.getElementById('texteDefil').style.top = y++;
    document.getElementById('compteur').value = y;
  }
  //Arret défilement du texte
  function arretDefil()
  {
    clearInterval(minuteur);
    minuteur=null;
    y = 0;
    document.getElementById('texteDefil').style.top = y;
    document.getElementById('compteur').value = y;
  }
  function pause()
  {
    clearInterval(minuteur);
  }
  
/*************************************/
/*** Intégration dans une page PHP ***/
/*************************************/
<?  
    
    echo'<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
            <title>Texte Defilant</title>        
            <meta name="robots"                    content="all">    
            <meta name="description"               content="Texte Défilant">
            <meta name="keywords"                  content="voir,défiler,slide">                
            <meta http-equiv="Content-Type"        content="text/html;charset=windows-1252;">
            <meta http-equiv="Content-Language"    content="fr">  
            <script language="javascript" type="text/javascript" src="textDef.js"></script>
            <link rel="stylesheet" href="style.css"> 
        </head>
        <body style="overflow:hidden;background-color:white;" onload="window.status=\'Votre navigateur est: \'+navigator.appName">
        <div style="width:600;float:top;padding:15px;">
            <a href="http://validator.w3.org/check?uri=referer" target="_blank"><img
                src="http://www.w3.org/Icons/valid-html401"
                alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0" style="text-decoration:none;" >
            </a>
        </div>
        <center>
        <div id="Haut" style="left:0;position:absolute;background:white;z-index:1;width:100%;">
        <table align="center"  bgcolor="white">
        <tr>
            <td style="height:20;">
              <form name="boutons" style="border:solid black 1px;" action="">
                    <input class="boutons" onclick="pause()"         type="button" value="II"     >
                    <input class="boutons" onClick="transfert()"     type="button" value="<<"     >
                    <input class="boutons" onClick="arretDefil()"    type="button" value="Début"  >
                    <input class="boutons" onClick="transfertBis()"  type="button" value=">>"     >
                    <b>Pos: </b>  <input type="text" value="0" id="compteur" name="compteur" >               
              </form>
            </td>
        </tr>
        </table>
        </div>
        <table align="center" style="border:solid navy 2px;background:#aaccff;width:50%;height:30%;" >
        <tr>
            <td align="center">
             <div id="texteDefil" style="z-index:0;position:relative;left:0;height:90%;width:500;">
             <img src="titre.gif" alt="">
             <pre id="texte" style="">';include("texte.txt");echo'</pre>   
             </div>
            </td>
        </tr>

        </table>
        <div id="Bas"  style="position:relative;background:white;left:0;top:0; height:50;width:100%; z-index:1"></div>
        </center>
          </body>
        </html>

    ';
?>
/******************************************/
/*** Intégration de la feuille de style ***/
/******************************************/

.boutons{
    border      :solid navy 2px;
    background  :#aaccff;
    color       :navy;
    width       :50;
    height      :25;
}
#texte{
    text-align  :left;
    padding     :10;
    margin-top  :50;
    color       :navy;
    font-weight :bold;
}
#compteur{
    border      :solid black 1px;
    width       :30;
    text-align  :center;
}

Conclusion :


Pour un soucis de clarté, j'ai mis bout à bout le javascript, la page PHP et la feuille de style...de plus j'ai tout mis à la racine pour assurer la mise en place des sources externes pour les novices (OUPS des fots d'ortograf :P)

Venez sur mon portail, il est en cours de construction mais pourrait intéresser les novices ainsi que les exégètes du code ;)

http://debbog.free.fr/
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler Commenter la réponse de rttb
rttb
Messages postés
290
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
25 avril 2008
 -
Bien sympa ce script, merci ...
Signaler Commenter la réponse de cs_leris
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
 1 -
il s'arrete quand ? à pâques ou a la trinité ?
Signaler Commenter la réponse de cs_jeff
cs_jeff
Messages postés
18
Date d'inscription
mercredi 10 octobre 2001
Statut
Membre
Dernière intervention
1 avril 2005
 -
très pratique, merci !
Signaler Commenter la réponse de coucou747
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 26 -
ça a l'air pas trop mal.

"il s'arrete quand ? à pâques ou a la trinité ?"=> je ne comprends pas pourquois tu dis ça... j'ai testé avec Mozilla 1.7 et Konqueror 3.2.3 et défilement et aret marchent...

Sinon, sous Mozilla, ça a beau marcher, c'ets moche... vas voir pourquois...

allez je sais que tu peux le rendre portable !!
Bonne chance
Signaler Commenter la réponse de cs_leris
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
 1 -
"il s'arrete quand ? à pâques ou a la trinité ?"=> je ne comprends pas pourquois tu dis ça... j'ai testé avec Mozilla 1.7 et Konqueror 3.2.3 et défilement et aret marchent..."

ben oui, il fonctionne ... mais si tu le mets en marche, au bout de 20mn tu le recuperes chez le voisin du dessus ?
Afficher les 10 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (xloadx)