1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Texte defilant</title>
<style>
#texte {
width:640px; /* taille du div */
height:480px;
border:1px solid black;
position: absolute;
overflow:hidden; /* la partie des objets qui dépasse du div est cachée*/
}
#contenu {
position: absolute; }
</style>
</head>
<body>
<script>
var TexteNode;
var ContenuNode;
var posx,texteposx;
var depart;
function init() {
TexteNode=document.getElementById("div_texte"); // récupération du div
contenu_id=document.getElementById("contenu"); // récupération du texte
TexteHeight=TexteNode.offsetHeight; // lecture de l'offset hauteur du div (html)
posx=0;
depart=0;
setInterval("move()", 30); // appel fct move ttes les 30 ms
}
function move() {
posx+=1;
texteposx=depart+posx+1;
contenu_id.style.top=texteposx+"px"; /* écriture position du texte (CSS pour écrire)*/ if ((texteposx>=TexteHeight)) { posx= 0;}
}
</script>
<script language="javascript">window.onload = init;</script>
<div id="div_texte">
<p id="contenu">bla bla</p>
</div>
</body>
</html> |