Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-22 14:42:05
Original
2923 Leute haben es durchsucht

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);
 }
Nach dem Login kopieren
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);
}
}
Nach dem Login kopieren
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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!