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:
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 Mouseleave3)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):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); } }
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!