Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Klicken Sie auf die Jquery-Schaltfläche, um das Implementierungsprinzip und code_jquery automatisch hervorzuheben

WBOY
Freigeben： 2016-05-16 16:51:05
Original
1122 Leute haben es durchsucht

Tatsächlich ist das Prinzip sehr einfach. Wenn wir klicken, fügen wir dem Element ein benutzerdefiniertes Attribut hinzu. Nach dem Hinzufügen wird ein passender Stil angezeigt, der sich automatisch an den Hintergrund anpasst in den ursprünglichen Zustand zurückversetzen

Erweitern Sie zunächst eine Methode hoverEl in Ihrem eigenen js

Kopieren Sie den Code Der Code ist wie folgt folgt:

$ .extend($.fn, {
hoverEl:function(){

var _this = $(this);
var _t = setTimeout (function(){
_this.attr( "hover", "on");
}, 10);
_this.attr("hoverTimeout", _t); (function(){
clearTimeout( _this. attr("hoverTimeout") );
var _t = setTimeout(function(){
_this.removeAttr("hover");
}, 100 );
_this.attr("hoverTimeout" , _t);

}
}; Zweitens definieren Sie den Stil , wenn ein bestimmtes Attribut hinzugefügt wird



Code kopieren

Der Code lautet wie folgt: li[ hover=on]{ background-image:-webkit- gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; : -webkit-linear-gradient(top, #4286F5, #194FDB )!important; color: white!important; cursor: pointer!important; Aufrufbeispiel:



Code kopieren


Der Code lautet wie folgt:

$(e.target) .hoverEl();
Verwandte Etiketten：
点击按钮
Quelle：php.cn
Vorheriger Artikel：Zwei Möglichkeiten, das verborgene Erscheinungsbild von JS-Containern zu steuern, um Stiländerungen zu verhindern. Javascript-Kenntnisse Nächster Artikel：jquery deaktivieren. Klicken Sie mit der rechten Maustaste auf example_jquery
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...
Aus 2024-04-06 19:23:03
0
1
411
Die Statusaktualisierung funktioniert in React-Native auf Android nicht Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn ...
Aus 2024-04-06 16:54:10
0
1
410
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
Der beste Weg, um eine Drei-Zustands-Umschaltung in React zu implementieren? Ich erstelle in React einige Schaltflächen, die eine Zustandsänderung von einer zur nächst...
Aus 2024-04-06 13:51:32
0
1
418
So drucken Sie den Wert des ausgewählten Kontrollkästchens nach der Übermittlung aus Dies ist meine Liste der Kontrollkästchen und Schaltflächen, die ich zum Übermitteln von D...
Aus 2024-04-06 13:07:43
0
2
337
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage