Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des graphiques et du code texte pour l'implémentation de l'effet de boîte de dialogue flottante Tooltip à l'aide de JavaScript natif

黄舟
Libérer: 2017-03-22 14:42:05
original
2918 Les gens l'ont consulté

Cet article présente principalement la conception et la mise en œuvre des effets spéciaux de la boîte d'invite TooltipFloating en JavaScript natif. Il a une certaine valeur de référence. 🎜>

Utilisez JavaScript natif pour concevoir et implémenter l'effet de boîte d'invite flottante Tooltip et découvrez la simplification du code, la liaison d'événements, la propagation d'événements et d'autres techniques et connaissances.

Quatre points clés des effets spéciaux :

Affichage : lorsque la souris se déplace sur le lien hypertexte ToolTip, la boîte d'invite ToolTip peut être affichée

Masquer : Souris Lorsqu'elle est éloignée, la boîte d'invite ToolTip se cache automatiquement
Positionnement : La position de la boîte d'invite ToolTip doit être définie en fonction de la position du lien hypertexte ToolTip
Configurable : La boîte d'invite ToolTip peut modifier la taille et afficher le contenu selon différents paramètres

Remarques :

1) border-radius et box-shadow sont des méthodes d'écriture compatibles

2) Peu importe si le pointeur de la souris passe par l'élément sélectionné ou ses sous-éléments, l'événement mouseover sera déclenché. Correspondant à mouseout

L'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris passera par l'élément sélectionné. Correspondant à mouseleave

3)

W3C stipule que les éléments en ligne ne sont pas autorisés à imbriquer des éléments au niveau du bloc. Le lien a contient un p imbriqué, ce qui peut. pas conforme aux standards du W3C (astuce : Il a été créé dans le lien a lors de son déplacement dans le lien a. L'identifiant obtient la référence DOM de l'élément

2) La fonction de liaison de l'événement

L'effet est le suivant :

var $ = function(id){
return document.getElementById(id);
 }
Copier après la connexion

function addEvent(obj,event,fn){ //要绑定的元素对象,要绑定的事件,触发的回调函数
if(obj.addEventListener){ //非IE,支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE,只支持冒泡
obj.attachEvent('on'+event,fn);
}
}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!