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

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);
 }

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

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!