1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Effets
  5. Texte défilant ( boutons : arrêt - pause - avant - arrière et feuille de style ) ( à upgrader à volonté )

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 23 868 fois - Téléchargée 1 339 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
cs_kozaki Messages postés 14 Date d'inscription mercredi 24 septembre 2003 Statut Membre Dernière intervention 18 avril 2006
22 juin 2007 à 18:54
Sympa la séparation du code, du css, du JS et du contenu :)

Par contre, y-a pas mal de travail pour le rendre conforme à une DTD standard. Je viens de m'y coller un moment en HTML 4.01 strict et j'ai encore plusieurs erreurs.
Enfin surtout, après que j'ai retiré toutes les balises html 3.2 ("center" & Co), mais sans toucher le javascript, le texte s'affiche mais ne défile plus ; seul "Pos" s'incrémente !?

Ça va faire 3 ans que je cherche un moyen de faire défiler quelques news sur un site adhérant aux standards web. Sans dec :'o|

kozaki
xloadx Messages postés 28 Date d'inscription samedi 15 mai 2004 Statut Membre Dernière intervention 10 septembre 2011
5 mai 2007 à 03:07
désolé de n'avoir pas pu revenir plus tôt sur ce code, j'ai eu beaucoup à faire....me prévenir si besoin d'infos ou de codes en relations avec ceux déjà publiés..

Bien amicalement votre dévoué XLOADX...
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
28 nov. 2004 à 13:02
"même pas besoin de programmation en java,"=> ça veut dire quoi ?

sinon non, ça a l'air bien mais c'est pas portable, donc ça reste &a améliorer...

bonne chance pour coriger ça...
cs_leris Messages postés 419 Date d'inscription dimanche 31 août 2003 Statut Membre Dernière intervention 19 avril 2010 3
27 nov. 2004 à 18:09
Libe444 :

http://bluejayway.free.fr/bartmoon.gif

L.
cs_LiBe444 Messages postés 220 Date d'inscription dimanche 7 septembre 2003 Statut Membre Dernière intervention 7 avril 2007
27 nov. 2004 à 17:55
Bonsoir,
leris : toujours casse-bonbons héhé ! Tu commences à ennuyer un peu tout le monde là... (je ne suis pas le seul à le penser d'après ce que j'ai vu par ailleurs)

xloadx : très bien, même pas besoin de programmation en java, continues comme ça !
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)