Programmation ⇒ javascript facebook twitter youtube

Défilement titre | Défilement titre


Ce JavaScript permet de faire défiler le titre de la page (celui qui est entre <title> et </title>).

<html>
<head>
<title></title>

<script type="text/javascript">

/*
On va avant tout définir des variable.
On active donc icet c à 0 (elles serviront à s'incrementer plus tard), puis on met notre titre à faire défiler dans une variable str (pour string).
Une fois ceci fait, on crée également une variable tilen (title length) qui contiendra le nombre de caractères contenus dans str grace à l'utilisation de la propriété length. Et pour finir on active également une variable go que l'on verra plus tard.
*/

var ic = 0;
var c = 0;
var str = "Bienvenue sur http://www.7astuces.fr/: Exemples & 7astuces";
var tilen = str.length;
var go;

function ts()
{
   til();
   if(c < tilen)
   {
    clearTimeout(go);
   }
   c++;
   go = setTimeout("ts();",10)
}

/*
Bon un peu d'explication quand même.
Nous avons ouvert une fonction ts(); qui appele une autre fonction til(); (nous y reviendrons plus bas).
Nous avons ouvert une condition avec if qui dit que tant que le nombre de caractères de la chaine est supérieur à la variable c on annule avec la méthode ClearTimeout le délai affecté à go (j'expliquerais plus tard cette histoire de délai) puis on incrémente la variable c. pour terminer cette fonction on donne à la variable go l'ordre de reboucler sur la fonction ts(); toutes les 10 milisecondes.
C'est sur cette valeur de délai qu'il faudra jouer pour faire défiler plus ou moins vite votre texte.
Une fois que c est égale à tilen on stope le tout avec la méthode clearTimeout vue plus haut.
*/

function til()
{
    var dti = str.substring((tilen - ic - 1),tilen);
    document.title = dti;
    ic++;
}

/*
Ici nous écrivons dans le titre (title de la page (document) la variable dti.
L'astuce ici est d'ajouter à chaque appel de la fonction un caractère en partant de la fin grace à la méthode substring en utilisant la variable ic que l'on incrémente à chaque fois. On n'écrit donc pas une fois le titre et on le fait défiler (si vous savez le faire, je suis preneur) mais on va réécrire le titre à chaque fois en ajoutant un caractère à gauche dans un temps relativement cours; on a donc l'impression qu'il défile.
*/

ts();

// Bon la rien à dire hein... On démarre juste le script. ET C'EST TOUT :-)

// -->
</script>

</head>
<body>

</body>
</html>




>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces