Cours ⇒ Javascript et AJAX facebook twitter youtube

DOM et DHTML ⇒ & Déplacement d'éléments



id = window.setInterval("animate();", 100);

Un scénario DHTML plutôt rare, mais encore utilisé, consiste à positionner un élément, mais également à le déplacer et donc à l'animer. Pour ce faire, les méthodes window.setTimeout() et window.setInterval() sont assez pratiques. Le code suivant anime une bannière publicitaire sur la diagonale de la page. Le seul problème potentiel réside dans la manière d'animer la position. Pour les propriétés Internet Explorer (posLeft, posTop), il suffit d'ajouter une valeur. Pour left et top, vous devez d'abord déterminer l'ancienne position, puis lui ajouter une valeur. La fonction JavaScript parseInt() extrait le contenu numérique d'une chaîne comme "123px". Toutefois, parseInt() renvoie NaN si aucune valeur n'est trouvée dans left ou top. La fonction d'aide suivante s'occupe donc de

cette situation ; dans ce cas, elle renvoie plutôt 0 :

function myParseInt(s) {
  var ret = parseInt(s);
  return (isNaN(ret) ? 0 : ret);
}

Ensuite, le code suivant anime la bannière et s'arrête après 50 itérations :

<body>
<script language="JavaScript" type="text/JavaScript">
var nr = 0;
var id = null;
function animate() {
nr++;
if (nr > 50)
{
window.clearInterval(id);
document.getElementById("element").style.visibility = "hidden";
}
else
{
var el = document.getElementById("element");
el.style.left =(myParseInt(el.style.left) + 5) + "px";
el.style.posLeft += 5;
el.style.top =(myParseInt(el.style.top) + 5) + "px";
el.style.posTop += 5;
}
}
window.onload = function() {
  id = window.setInterval("animate();", 100);
};
</script>
<h1>Document sans nom</h1>
<div id="element" style="position: absolute; background-color: #eee; border: 1px solid">
JavaScript 7astuces.fr </div>
</body>

 


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