Mécanisme réactionnel avec Jquery

Jquery

Procurez-vous les derniéres versions des fichiers CSS et JAVASCRIPT de jquery.mobile ainsi que de jquery →    ici et insérez ces fichiers dans votre répertoire js/ Alternativement vous pouvez aussi trouver les fichiers qui sont utilisés sur la présente page: →   jquery-1.9.1.min.js →   jquery.mobile-1.3.2.min.js →   jquery.mobile-1.3.2.min.css Vous enregistrerez le fichier jquery dans votre répertoire js/, les deux fichiers jquery.mobile dans un sousrépertoire js/jquery132/ à créer.

Un mécanisme

Vous pouvez voir un mécanisme →    ici Toutes les complications de la suite par rapport à l'animation simple de la page précédente viennent du fait qu'un essai est fait d'adapter à des écrans de largeur et hauteur différentes!! Un Click sur la touche droite de votre souris donnera accès au listing HTML et JAVASCRIPT du fichier. Imprimez-le pour bien comprendre les explications suivantes .

Mise en route dans HTML

Insertion de Jquery - Comme tout Javascript externe, Jquery s'insère au début de la manière suivante:

Veillez surtout à ce que les fichiers jquery soient bien dans le répertoires indiqués !)

Images de molécules - Les modèles (ici film1.png, film2.png etc..) doivent être téléchargés dans le répertoire pic/. - Ils sont insérés dans le fichier comme ceci:

Position horizontale - Le coin supérieur gauche se trouvera à left % de la largeur de l'écran Position verticale et largeur des images - Comme les écrans ( laptops, smartphones, tablettes, ..) peuvent différer considérablement, essayons d'exprimer ces grandeurs en fonction de la largeur de la première image prise comme unité de mesure:

puis..

Animation - Pour le reste chaque modèle "figurant " sera manipulé (rendu visible, caché ou déplacé) comme indiqué sous "bewege(par)" suite au click numéro "par":