begin process at 2012 02 13 04:39:57
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > DEFILEMENT HORIZONTAL DE TEXTE

DEFILEMENT HORIZONTAL DE TEXTE


 Information sur la source

Note :
2,67 / 10 - par 3 personnes
2,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Débutant Date de création :05/02/2005 Date de mise à jour :05/02/2005 17:09:53 Vu :31 253

Auteur : olive92

Ecrire un message privé
Site perso
Commentaire sur cette source (16)
Ajouter un commentaire et/ou une note

 Description

Ce code permet de faire défiler du texte contenu dans une simple balise DIV à la manière d'une banière.
Il est possible de modifier facilement la vitesse de défilement et les positions du texte...

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
  • <html>
  • <head>
  • <title>DEPLACEMENT HORIZONTAL DE TEXTE</title>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <script type="text/javascript">
  • rd=10;
  • la=screen.availWidth;
  • function c1()
  • {
  • rd+=10;
  • if (rd>la-175) // selon longueur texte
  • rd=20;
  • el=document.getElementById("a");
  • el.style.left=rd;
  • setTimeout("c1()", 100); // vitesse de défilement
  • }
  • </script>
  • </head>
  • <body onLoad="c1();">
  • <div align="center" style="position:absolute; top:450; left:20" id="a">TEXTE A MODIFIER</div>
  • </body>
  • </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
		<title>DEPLACEMENT HORIZONTAL DE TEXTE</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript">
			rd=10;
			la=screen.availWidth;

			function c1()
			{
			rd+=10;
			if (rd>la-175) // selon longueur texte
			rd=20;
			el=document.getElementById("a");
			el.style.left=rd;
			setTimeout("c1()", 100); // vitesse de défilement
			}
		</script>
	</head>
	<body onLoad="c1();"> 
		<div align="center" style="position:absolute; top:450; left:20" id="a">TEXTE A MODIFIER</div>
	</body>
</html>

 Conclusion

Le code tient maintenant compte de la largeur de l'écran. Il ne reste plus qu'à déterminer la longueur de texte incorporé dans la balise DIV en remplaçant 175 de l'exemple par la longueur en pixel de votre texte. Si la résolution de l'écran change le code saura s'y adapter sans modification.


 Historique

05 février 2005 17:09:54 :
Détection automatique de la largeur disponible de l'écran

 Sources du même auteur

Source avec Zip Source avec une capture JEU DES PAIRES
Source avec une capture CRYPTAGE DE TEXTE
NOMBRES PARFAITS
Source avec une capture SUITE DE FIBONACCI
Source avec une capture DIVISEURS & NOMBRES PREMIERS

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Commentaires et avis

Commentaire de fg85 le 05/02/2005 22:05:05

Très intérressant mais le problème est que certain pc vont être ralentit par le code :-( .

Sinon bon script et bonne idée .

----------------------
http://fg.logiciel.free.fr

Commentaire de coucou747 le 06/02/2005 10:31:13 administrateur CS

tu pourais créer une fonction d'écriture des textes... ça serait plus simple...

Commentaire de crashtest le 08/02/2005 12:32:41

Je le trouve trés bien ton script il est bien réalisé, il est très intéréssent.
Juste moi pour faire défiler un texte une image ou autre j'utilise les balises
<marquee direction="up"></marquee>  //monter
<marquee direction="down"></marquee> //descendre
<marquee direction="right"></marquee> //droite
<marquee direction="left"></marquee> //gauche
.
Bon on peut paramétré tout se que l'on veut.Sauf la vitesse mais bon c'est pas très grave la vitesse.
Sinon c'est quand meme plus léger que ton script.

Commentaire de coucou747 le 08/02/2005 18:29:08 administrateur CS

avec les marquee on peut changer la vitesse, mais certaines propriétées ne peuvent êtres ajoutées...
et c'est pas compatible...

Commentaire de crashtest le 08/02/2005 20:13:20

A bon  on peut changer la vitesse. Stp tu pourrais me montrer le code pour la vitesse. Sa pourrai me servir.

Commentaire de coucou747 le 09/02/2005 14:47:26 administrateur CS

je sais plus comment dsl

Je connais le html, mais pas dasn les détails...

Commentaire de lrogba le 09/02/2005 22:55:00

J'ai ce script (qui n'est pas de moi, je suis debutant en javascript ) qui peut repond en quelque sorte à la question je suppose .

<script language="JavaScript1.2">
// personnalisez ici ***********
var marqueeleft=0
var marqueetop=0
var marqueewidth=780
var marqueeheight=20
var speed=10
var marqueecontents='Mettez votre super message <B>ici</B>, il n y a pas de limite, alors place a l imagination'
//*****************************
if (document.all) document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'px">'+marqueecontents+'</marquee>')

function regenerate()
{
window.location.reload()
}
function regenerate2()
{
if (document.layers)
{
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}

function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}

function scrollit()
{
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1))
{
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else
{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}

window.onload=regenerate2
</script>
<ilayer left=&{marqueeleft}px; top=&{marqueetop}px; width=&{marqueewidth}px; height=&{marqueeheight}px; name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>

Commentaire de crashtest le 09/02/2005 23:33:47

Merci beaucoup pour se script j'ai trouvé se que je voulais.
Le code pour la vitesse pour les balises <marquee></marquee> c'est ' scrollAmount="7" '

alor pour les débutants il faut mettre le code comme sa
<marquee scrollAmount="7">votre texte</marquee>.

Commentaire de olive92 le 10/02/2005 22:32:28

Pour modifier la vitesse de défilement dans mon code original, il suffit de changer la valeur en milliseconde (ici de 100) dans la ligne "setTimeout("c1()", 100); // vitesse de défilement". Plus le temps est court, plus le texte défile rapidement au prix d'une utilisation CPU un peu plus élevée...

Commentaire de Hugololo le 01/03/2005 14:18:05

bonjour !
nouveau dans l'univers de web master !
où dois-je coller la programmation pour faire un texte défilant sur ma page principale ??
merci d'avance
voici mon site : http://lolane.club.fr/index.htm
Loïc

Commentaire de coucou747 le 01/03/2005 19:10:29 administrateur CS

comme je te le disais dans un autre post, t'as un exemple comlet de page....

Commentaire de Hugololo le 02/03/2005 14:27:05

hello
y'a quelqu'un ??

Commentaire de coucou747 le 02/03/2005 14:42:29 administrateur CS

attends, t'as les sources d'une page complète, tu bloques ou ????

Commentaire de Hugololo le 02/03/2005 14:54:49

1.faut copier tout le code ou juste ce qui est grisé ??
2. j'ai fait des essais, ça défile pas, ça reste statique

Commentaire de coucou747 le 02/03/2005 15:13:43 administrateur CS

mais t'avais pas que ça a copier... t'avais la div et le onload du body...
lis des tutoriaux aulieu de poster des commentaires...

Commentaire de tchitcha26100 le 28/09/2006 19:53:33

ça marche sous ie mais pas sur firefox! comment le rendre compatible pour les 2???
merci

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,170 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales