Un texte qui fait le tour de la fenêtre
Soyez le premier à donner votre avis sur cette source.
Snippet vu 5 679 fois - Téléchargée 23 fois
Contenu du snippet
Le titre est assez explicite je pense^^. Reste à ajouter qu'il n'est pas finalisé ici et que vous pouvez bien entendu reprendre et personnaliser le script à votre guise. N'hésitez pas à me proposer des améliorations si vous en voyez, mais cette page a déjà subi l'examen de bultez^^.
Source / Exemple :
<html>
<head>
<title>Création d'un site web en html et javascript</title>
<style>
#texte{
position: absolute;
top: 50px;
left: 50px;
font-size: 30px;
font-family: arial;
font-weight: bold;
}
#rouge{
position: absolute;
top: 20px;
left: 200px;
color: 'red';
}
#bleu{
position: absolute;
top: 20px;
left: 450px;
color: 'blue';
}
#vert{
position: absolute;
top: 20px;
left: 700px;
color: 'green';
}
#jaune{
position: absolute;
top: 20px;
left: 950px;
color: 'yellow';
}
</style>
<script language="Javascript">
par = 'Ce site sans theme particulier est un<br>exercice et un entraînement à la production<br>en javascript. Toutes vos idées pour son<br>développement sont les bienvenues.';
abscisse = 50;
ordonnee = 50;
compteur = 0;
car = 0;
couleur = 'red';
function changecouleur(choix){
couleur = choix;
}
function moveText(){
compteur ++;
if(compteur == 4){
compteur = 0;
if(par.charAt(car) == '<') car = car + 4;
if(par.charAt(car) == ' ') car++;
document.getElementById('texte').innerHTML = par.substring(0,car) + par.charAt(car).fontcolor(couleur) + par.substr(car + 1);
car ++;
if(car > par.length) car = 0;
}
absmax = document.body.clientWidth - document.getElementById('texte').clientWidth - 50;
ordmax = document.body.clientHeight - document.getElementById('texte').clientHeight - 50;
if(ordonnee == 50 && abscisse < absmax){
document.getElementById('texte').style.left = abscisse;
abscisse ++;
}
if(abscisse == absmax && ordonnee < ordmax){
document.getElementById('texte').style.top = ordonnee;
ordonnee ++;
}
if(ordonnee == ordmax && abscisse > 50){
document.getElementById('texte').style.left = abscisse;
abscisse --;
}
if(abscisse == 50 && ordonnee > 50){
document.getElementById('texte').style.top = ordonnee;
ordonnee --;
}
setTimeout("moveText()",20)
}
</script>
</head>
<body onload="moveText()" background="cloud.gif">
<a href="#" onclick="changecouleur('red')" id="rouge">rouge</a><a href="#" onclick="changecouleur('blue')" id="bleu">bleu</a><a href="#" onclick="changecouleur('green')" id="vert">vert</a><a href="#" onclick="changecouleur('yellow')" id="jaune">jaune</a>
<div id="texte">
Je suis un texte fenêtre-trotteur<br>
résultant de près d'une semaine<br>
de travail.
</div>
</body>
</html>
A voir également
- Un texte qui fait le tour de la fenêtre
- C / C++ / C++.NET : Tour de hanoi sous console (texte) et son avec fmod - CodeS SourceS - Guide
- Tour de hanoï python - Guide
- Vba ecrire fichier texte - Conseils pratiques - Visual Basic / VB.NET
- Tour de hanoi java - Guide
- Convertir fichier binaire en texte - Forum - C / C++ / C++.NET
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.