Sur la base des besoins du projet, l'effet de page suivant doit être créé: lorsque l'utilisateur passe l'avatar de l'ami dans la liste de l'ami, les informations de base de l'ami sont affichées, qui est en fait une fonction similaire à celle du client QQ.
J'ai trouvé beaucoup de codes en ligne, et essentiellement tous ont réalisé que la souris était suspendue et que la div est apparue, puis j'ai disparu immédiatement après son départ. Il existe également des codes CSS purs qui réalisent cet effet, mais ils sont inutiles pour moi. Ce dont j'ai besoin, c'est JS (car mes données doivent être obtenues via Ajax), et la souris ne peut pas être cachée immédiatement après son départ. Il y a aussi une entrée de fonction sur ce div. Cet effet de page m'a jeté depuis une journée, ce qui montre que mes technologies JS et CSS doivent être améliorées ...
Après avoir cherché longtemps, j'ai finalement trouvé deux idées réalisables comme suit. Il y a un exemple de ces deux méthodes. Je ne les ai pas écrits et je ne les ai pas utilisés non plus. Partageons-les et l'adresse de démonstration est affichée. Ma méthode fait référence à l'idée de la méthode B.
Méthode A:
Mettez l'élément flottant div et déclencheur A dans le même élément parent et déclenchez l'affichage lorsque la souris passe par l'élément parent. De cette façon, lorsque la souris se déplace vers la div, elle est toujours dans l'élément parent et le div ne sera pas caché.
Méthode B:
La div apparaît lorsque la souris passe a. Lorsque la souris quitte A, une minuterie est réglée pour éteindre la div. Si la souris se déplace vers le div, la minuterie est effacée.
- `` are
Ma méthode adopte l'idée de la méthode B ci-dessus. Lorsque l'utilisateur quitte l'image qui déclenche l'événement, la carte de données DIV doit être retardée de 3 secondes avant sa fermeture. L'utilisateur a suffisamment de temps pour effectuer l'opération correspondante. Lorsque l'utilisateur clique sur d'autres images d'amis, la méthode cachée sera immédiatement appelée pour fermer l'ouverture et le synchronisation DIV précédents.
Voici le code JS pour ma méthode:
// Affiche la carte de données var avant-ID; // Définissez la fonction de variable globale ShowInfocard (thisObj, id) {this.hidden (avant); // Masquez immédiatement le div sélectionné précédent avant Id = id; // alerte (id); // var d = $ (thisObj); // var pos = d.offset (); // var t = pos.top + d.height () - 5; // la position supérieure de la boîte contextuelle // var l = pos.left - d.width () - 600; // la position de gauche de la boîte contextuelle // $ ("#" + id) .css ({"top": t, "Left": l}). Show (); // var objdiv = $ ("#" + id); $ (objdiv) .css ("affichage", "bloc"); $ (objdiv) .css ("gauche", event.clientx-280); // La valeur X de la boîte pop-up est $ (objDiv) .css ("top", event.clienty-10); // La valeur y de la zone pop-up est la valeur y} function hideinfocard (id) {// masquer div // retard pendant 3 secondes setTimeout ('Hidden (' + id + ')', 3000); } fonction Hidden (id) {$ ("#" + id) .hide (); }Voici un extrait de code div caché en html:
<div id = "id" style = "affichage: Aucun; largeur: 250px; hauteur: 150px; fond-couleur: # d1eeee; position: absolue;"> </div>
Dans HTML, vous devez appeler les méthodes ShowInfocard et HideinFocard et écouter les événements de souris en utilisant l'énoncé suivant:
onMouseOver = "showInfocard (this, '$ {ami.friendId}')" onMouseout = "hideinfocard ('$ {amifriendId}')"Ce sont des extraits de code dynamiques. Lorsque vous l'utilisez, vous devez introduire le cadre jQuery.js, et bien sûr, il peut également être modifié en JS pur. Ce qui précède est terminé. Ajax obtient les informations, puis utilise JS pour insérer le code HTML dans le div ci-dessus pour terminer l'affichage. Enfin, j'ai un rendu préliminaire, qui est assez moche ...