DeplacementElement

Un objet JavaScript
déplaçant un élément verticalement, horizontalement ou en diagonale

Cet objet permet de déplacer un élément dans toutes les directions, d’un point d’origine à un point de destination et inversement. Ces points peuvent se situer à l’intérieur comme à l’extérieur de la zone d’affichage. Deux méthodes permettent de masquer et afficher l’élément. Voici le prototype, seul le dernier paramètre intervalle est optionnel :

DeplacementElement (idElement, origineX, destinationX, decalageX,
          origineY, destinationY, decalageY, intervalle)
	

Télécharger l’objet avec fichier d’exemple (.zip)

Utilisation

1 – Insérer l’objet DeplacementElement dans l’élément head de la page :

<script src="objet-deplacement-element.js"
          type="text/javascript"></script>
		

2 – Définir l’élément à déplacer dans le code HTML, ici une image placée dans une <div> ; l’élément doit être identifié par un attribut id :

<div id="a_deplacer">
     <img src="image.jpg" width="30" height="30" alt="">
</div>
	

3 – Créer une instance de l’objet, placée dans le code HTML après la définition de l’élé­ment à déplacer. La variable JavaScript doit porter le nom de l’attribut id de l’élément cor­res­pondant, comme a_deplacer dans notre exemple :

var a_deplacer = new DeplacementElement ("a_deplacer", -200, 300,
          10, 0, 750, 15, 10)
	

4 – Lancer les déplacements aller et retour, ici depuis 2 liens :

<a href="#" onclick="if (!a_deplacer.enMvt)a_deplacer.aller()"> … </a>
<a href="#" onclick="if (!a_deplacer.enMvt)a_deplacer.revenir()"> … </a>
	

… ou depuis un seul lien :

<a href="#" onclick="if (!a_deplacer.on && !a_deplacer.enMvt)
     a_deplacer.aller() else if (a_deplacer.on && !a_deplacer.enMvt)
     a_deplacer.revenir()"> … </a>

À savoir

• Selon le contexte, vérifier que nomObjet.enMvt vaut false avant de lancer un déplacement, pour ne pas perturber un mouvement en cours ;
• La rapidité du déplacement dépend de l'intervalle intervalle séparant chaque mouvement, qui vaut 10 millisecondes par défaut ;
• Les décalages vertical et horizontal decalageY et decalageX permettent de régler la fluidité du déplacement ;
• Pour un déplacement horizontal, les coordonnées verticales de départ origineY et d’arrivée destinationY doivent être identiques et le pas du déplacement vertical decalageY doit être mis à 0 ;
• Pour un déplacement vertical, les coordonnées horizontales de départ origineX et d’arrivée destinationX sont identiques et le pas du déplacement horizontal decalageX est mis à 0 ;
• Dans le cas d’un déplacement en diagonale, le nombre de mouvements doit être le même dans les 2 directions. Par exemple, pour -200 en origineX et 300 en destinationX, le déplacement horizontal est de 500 pixels ; avec un decalageX de 10, le nombre de mouvements horizontaux sera de 50. Un mouvement vertical compatible pourra avoir une origineY de 0 et une destinationY de 750 pour un decalageY de 15, ce qui donne 50 mouvements également.

Paramètres

Les paramètres soulignés sont obligatoires
idElement	Chaîne ID de l’élément à déplacer
origineX destinationX	Entiers coordonnées horizontales d'origine et destination
origineY destinationY	Entiers coordonnées verticales d'origine et destination
decalageX decalageY	Entiers pas horizontal et vertical du déplacement en pixels
intervalle	Entier millisecondes entre chaque mouvement, vaut 10 par défaut

Propriétés

nomObjet.on	Booléen vaut true si le déplacement aller a eu lieu, false sinon ou si le déplacement retour a eu lieu
nomObjet.enMvt	Booléen vaut true pendant la durée des déplacements, false en-dehors

Méthodes

aller()	Déplacement aller (origine vers destination)
revenir()	Déplacement retour (destination vers origine)
cacher()	Masquage de l’élément
afficher()	Affichage de l’élément

imprimer

télécharger

haut de page

• contact
• gmap
• vcard

• Sites réalisés
• Faire un site internet
• Développement web
• Accueil