Jeder sollte sich noch daran erinnern, wie man JavaScript-Inline-Stile schreibt? (Es scheint, dass ich Unsinn spreche!)
Im Front-End-Entwicklungsprozess müssen wir manchmal das Kernel-Präfix des Browsers beurteilen und für verschiedene Browser unterschiedlich verarbeiten, damit wir dies tun können.
Alert (Element.Style.WebkitTransition); Dies soll den mit Webkit vorangestellten Übergangswert erhalten. Wenn es sich jedoch nicht um einen Browser mit dem Webkit -Präfix handelt, wird es undefiniert zurückgegeben. Und wir können alle Kernelpräfixe aufzählen und dann den Wert eines bestimmten CSS erhalten, um ein Urteil zu fällen. Der Code ist wie folgt:
Funktion getVendorPrefix () {// Verwenden Sie den Körper, um das Bestehen in Elementen zu vermeiden var body = document.body || document.documentElement, style = body.Style, vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'], i = 0; while (i <vendor.length) {// Hier bestimmen wir, ob es ein entsprechendes Kernel -Präfix gibt, wenn (TypeOf style [Anbieter [i] + 'Übergang'] === 'String') {return -Anbieter [i]; } i ++; }}Dann müssen Sie nur GetVendorPrefix () anrufen, um das Kernel -Präfix des Browsers zu kennen. Wenn undefined zurückgegeben wird, beweist es, dass der Browser das CSS3 -Attribut nicht unterstützt, dh es gibt kein Kernel -Präfix.
Jeder sollte wissen, dass wir, wenn wir CSS schreiben können, JavaScriptp nicht schreiben, wenn wir CSS schreiben können. Schließlich wird die Leistung von CSS höher sein als die von uns selbst. Daher werden wir in einigen praktischen Entwicklungen Übergänge wie ein einfaches Bildkarousel verwenden. Wir können CSS3 -Übergänge verwenden oder JQuerys Animate verwenden oder nativ von uns selbst schreiben, aber die Leistung von CSS3 wird definitiv höher sein, sodass wir zwei Code -Sätze schreiben und Animation für Browser verwenden, die CSS3 unterstützen, während Timer oder Animation verwendet werden, wenn sie nicht unterstützt werden. Dies gibt Ihnen eine bessere Benutzererfahrung.
Das oben genannte ist die Erfahrung, das Plug-In von jQuery.slides.js zu betrachten. Wenn es eine bessere Methode gibt, lassen Sie es mich bitte wissen.