Ausführliche Erläuterung des Grafik- und Textcodes zur Implementierung von Spezialeffekten für schwebende QuickInfo-Eingabeaufforderungsfelder mithilfe von nativem JavaScript

Dieser Artikel stellt hauptsächlich das Design und die Implementierung von TooltipFloating-Promptbox-Spezialeffekten in nativem JavaScript vor. Interessierte Freunde können sich darauf beziehen 🎜>

Verwenden Sie natives JavaScript, um den Tooltip-Floating-Promptbox-Effekt zu entwerfen und zu implementieren, und lernen Sie mehr über Codevereinfachung, Ereignisbindung, Ereignissprudeln und andere Techniken und Kenntnisse.

Vier wichtige Punkte von Spezialeffekten:

Anzeige: Wenn die Maus über den ToolTip-Hyperlink bewegt wird, kann das ToolTip-Eingabeaufforderungsfeld angezeigt werden

Ausblenden : Maus Beim Wegbewegen wird das ToolTip-Eingabefeld automatisch ausgeblendet
Positionierung: Die Position des ToolTip-Eingabefelds muss entsprechend der Position des ToolTip-Hyperlinks festgelegt werden
Konfigurierbar: Das ToolTip-Eingabefeld kann die Größe und ändern Inhalte nach verschiedenen Parametern anzeigen

Hinweise:

1) Border-Radius und Box-Shadow sind kompatible Schreibmethoden

2) Egal ob Der Mauszeiger bewegt sich über das ausgewählte Element oder seine Unterelemente. Das Mouseover-Ereignis wird ausgelöst. Entspricht Mouseout

Das MouseEnter-Ereignis wird nur ausgelöst, wenn der Mauszeiger durch das ausgewählte Element verläuft. Entspricht Mouseleave

3)

W3C legt fest, dass Inline-Elemente keine Elemente auf Blockebene verschachteln dürfen, was möglicherweise der Fall ist entspricht nicht den W3C-Standards (Tipp: Es wurde im a-Link erstellt, als es in den a-Link verschoben wurde)

Einfache Methode zum Schreiben von Funktionskapselungen (einfach zu referenzieren, die Codemenge verkürzen):

1) Durch Elemente erhält die ID die DOM-Referenz des Elements

var $ = function(id){
return document.getElementById(id);
 }

2) Die Funktion zum Binden des Ereignisses

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

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Grafik- und Textcodes zur Implementierung von Spezialeffekten für schwebende QuickInfo-Eingabeaufforderungsfelder mithilfe von nativem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!