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. 🎜>

Quatre points clés des effets spéciaux :

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 :

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!