Je dois faire un gif animé survoler une page et suivre un chemin. Je pense à utiliser jQuery mais aurais-je raison de penser que la seule façon de le faire est de calculer manuellement le pourcentage de largeur/hauteur où la couche de forme doit être placée, puis utiliser le positionnement absolu est le seul moyen de le faire? Je sais qu'il y a des plugins jQuery incroyables disponibles pour ce genre de choses.JavaScript/jQuery: Suivre le chemin sur la page
jQuery semble être la voie à suivre, base et plus d'un hack qu'une solution, mais si vous avez vraiment besoin de quelque chose avec JS.
<style type="text/css">
#butterfly
{
display:block;
background: #f00;
width: 100px;
height: 100px;
left: 0;
top: 0;
position: fixed;
background: url(butterfly.gif) no-repeat;
}
</style>
<script type='text/javascript'>
function moveButterfly() {
//moveDemo(document.getElementById('butterfly'), 10);
var butterfly = $('#butterfly');
var positions = [
{ props: { left: '25%', top: '20%' }, time: 1000 },
{ props: { left: '40%', top: '18%' }, time: 610 },
{ props: { left: '58%', top: '38%'}, time: 400 },
{ props: { left: '81%', top: '52%' }, time: 520 },
{ props: { left: '150%', top: '67%'}, time: 440 },
];
jQuery.each(positions, function(i, e) {
butterfly.animate(e.props, e.time);
});
}
$().ready(function() {
moveButterfly();
});
</script>
Le positionnement absolu est susceptible d'être le meilleur façon de le faire, oui. (Je ne voudrais pas mettre ma main sur le cœur en disant que c'est seulement façon, je suis sûr que vous pourriez jouer à d'autres jeux pour faire quelque chose de similaire, mais vous ne voulez probablement pas.)
Je dois le faire en pourcentage, sauf si cela est intrinsèque à votre problème. Ce qui suit joyeusement faire un élément absolument positionné puis le déplacer 5 pixels à droite et vers le bas tous les 10e de seconde jusqu'à itérations « count »:
function moveDemo(element, count) {
element.style.position = "absolute";
moveit();
function moveit() {
element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
element.style.top = ((parseInt(element.style.top) || 0) + 5) + "px";
if (count-- > 0) {
setTimeout(moveit, 100);
}
}
}
C'est juste JavaScript brut, mais les cadres comme jQuery, Prototype , Fermeture, YUI, etc. vous aident avec beaucoup de choses et valent la peine d'être examinées. Par exemple, si vous utilisez ce qui précède, sauf si vous positionnez l'élément à l'avance et que vous spécifiez également les styles gauche et supérieur sur l'élément lui-même (via un attribut en ligne style), il passera à 0,0 dès le début puis commencez à partir de là. Les cadres peuvent vous aider avec la tâche assez complexe de déterminer où se trouve un élément en ligne avant de le positionner de façon absolue.
Voici un exemple complet qui ne repose pas sur un cadre (mais devrait probablement, au moins pour déterminer la position de départ de « myElement »):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Move It Demo Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#myElement {
border: 1px solid black;
}
</style>
<script type='text/javascript'>
function startMoving() {
moveDemo(document.getElementById('myElement'), 10);
}
function moveDemo(element, count) {
element.style.position = "absolute";
moveit();
function moveit() {
element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
element.style.top = ((parseInt(element.style.top) || 0) + 5) + "px";
if (count-- > 0) {
setTimeout(moveit, 100);
}
}
}
</script>
</head>
<body><div>
<input type='button' value='Start' onClick="startMoving();">
<div id='myElement'>I'm on the move</div>
</div></body>
</html>
Merci, c'est ce que je pensais. Je suis allé avec jQuery et l'ai rendu un peu plus extensible (ci-dessous). – Echilon