JQuery ändern das Bild auf Schwebe

Eine wirklich coole Funktion von JQuery ist die Fähigkeit, ein Bild dynamisch zu ändern, z. B. wenn Sie die Maus über einen bestimmten Bereich des Bildschirms bewegen, ändert sich ein Bild. Wie Sie es machen: Sie verweisen auf die Image SRC -Eigenschaft und ändern sie über 2 Funktionen. Die erste Funktion ändert das Bild und die zweite ändert es zurück. In der HTML fügen wir dann dem Bereich, den die Maus auslöst, ein Ereignis hinzu (beachten Sie, dass diese Auslöser auch dem JavaScript hinzugefügt werden können). Einfach das. Siehe Live -Demo

jQuery ändern Bild dynamisch

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>	<span>//alert("open");
</span>	<span>var name_element = $('#twitter-image'); 
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>	<span>//alert("closed");
</span>	<span>var name_element = $('#twitter-image');
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

Das Folgende geht in die HTML:

häufig gestellte Fragen zu JQuery Image -Hover -Effekten

Wie kann ich JQuery verwenden, um ein Bild auf Hover zu ändern? Diese Methode gibt zwei Funktionen an, die ausgeführt werden sollen, wenn der Mauszeiger über die ausgewählten Elemente schwebt. Die erste Funktion wird ausgeführt, wenn die Maus in das HTML -Element eingeht, und die zweite Funktion wird ausgeführt, wenn die Maus das HTML -Element verlässt. Hier ist ein einfaches Beispiel:

$ (Dokument) .Ready (function () {
$ ("img"). Hover (function () {
$ (this) .attr ("src", "Image2.jpg"); });
}); Wenn Sie die Maus weg verschieben, wechselt sie zurück zu "Image1.jpg". Dies kann mit der: Hover-Pseudoklasse erfolgen. Hier ist ein Beispiel:

IMG: Hover {
Inhalt: URL ('Image2.jpg'); Diese Methode bietet jedoch keine Möglichkeit, das Bild wieder zu ändern, wenn die Maus das Bild verlässt. Für diese Funktionalität müssten Sie JavaScript oder JQuery verwenden. Die Find () -Methode gibt Nachkommenselemente des ausgewählten Elements zurück. Hier ist ein Beispiel:

$ (Dokument) .Ready (function () {
$ ("#div1"). Hover (function () {

$ ("#div2"). Find ("img"). Attr ("src", "image2.jpg"); $ ("#div2"). find ("img"). attr ("src", "image1.jpg");

}); Wenn Sie die Maus von "Div1" weg verschieben, wechselt das Bild in "Div2" wieder zu "Image1.jpg".

Wie kann ich das Bild auf Hover für ein Listenelement mit JQuery ändern? Die Methode Children () gibt alle direkten Kinder des ausgewählten Elements zurück. Hier ist ein Beispiel:

$ (Dokument) .Ready (function () {
$ ("li"). Hover (function () {
$ (this) .Children ("img"). Attr ("src", "image2.jpg"); $ (this) .Children ("img"). attr ("src", "image1.jpg");
}); Wenn Sie die Maus vom Listenelement weg verschieben, wechselt das untergeordnete Bild wieder auf "Image1.jpg". Diese Methoden verändern nach und nach die Opazität aus ausgewählten Elementen von versteckt zu sichtbar (Fadein) und von sichtbar bis versteckt (Fadeout). Hier ist ein Beispiel:

$ (document) .ready (function () {
$ ("img"). Hover (function () {
$ (this) .fadeout (500, function () {
$ (this) .Attr ("src", 🎜 🎜 🎜). function () {
$ (this) .fadeout (500, function () {

$ (this) .attr ("src", "image1.jpg"). Fadein (500);

});

});

}). Dann verblasst ein. Wenn Sie die Maus weg bewegen, verblasst sie aus, wechselt wieder zu „Image1.jpg“ und verblasst dann. Die Zahl 500 repräsentiert die Dauer des Effekts in Millisekunden.

Das obige ist der detaillierte Inhalt vonJQuery ändern das Bild auf Schwebe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!