Wie ändere ich das Hintergrundbild des Körpers beim Bewegen des Menüeintrags?
Lesezeit: 6 Minuten
Mons
Ich habe ein Menü und muss den Körperhintergrund für jeden Menüpunkt in ein anderes Bild ändern. Außerdem wäre es schön, wenn es beim Wechseln verblassen oder hüpfen oder etwas Schönes und Sauberes machen würde.
Ihr Code oben sollte gut funktionieren. Hast du irgendwelche Fehler oder was ist das Problem? jsfiddle.net/crjzsL1z
– Eisbehr
22. August 2016 um 8:35 Uhr
@eisbehr Ich denke, seine Frage ist, wie man die verblassende oder hüpfende Animation hinzufügt, er weiß, dass sein Code funktioniert.
– Hulothe
22. August 2016 um 8:44 Uhr
Die Frage ist, wie füge ich dem Code ein zweites Element hinzu, zum Beispiel #menu-item-18, damit es trotzdem funktioniert, und wie füge ich zum Beispiel die Animationsblende oder etwas anderes hinzu? Ich würde gerne sehen, wie sich der Hintergrund auf eine sanfte, schöne oder coole Weise ändert.
– Mons
22. August 2016 um 8:46 Uhr
Sie sollten uns auch Ihr Menü-HTML zeigen, dann können wir nach dem besten Weg suchen, um mehr Zuhörer hinzuzufügen. @mons
– Eisbehr
22. August 2016 um 8:47 Uhr
html @eisbehr hinzugefügt
– Mons
22. August 2016 um 9:53 Uhr
Sie können einfach die Elemente auswählen, bei denen Sie den Hintergrund ändern möchten.
var $body = $('body');
$('#main-menu-container li a').hover(function(){
$body.css('background', 'red');
}, function() {
$body.css('background', '')
})
Wenn Sie einen anderen Hintergrund wünschen, müssen Sie sie irgendwie speichern. Vielleicht als data Attribut im Menü oder erstellen Sie ein Objekt, speichern Sie die Bilder oder so etwas.
var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];
$('#main-menu-container li a').hover(function(){
$body.css('background', colors[$(this).parent().index()]);
}, function() {
$body.css('background', '')
})
JAWOHL!! Letzteres ist genau das, was ich suche! Jetzt brauche ich nur noch die Hintergründe, um flüssiger zu wechseln. @eisbehr
– Mons
22. August 2016 um 10:31 Uhr
Verwenden Sie nur Farben oder Bilder? Bilder sind hier nicht so einfach. Da muss man Tricks anwenden. @mons
– Eisbehr
22. August 2016 um 10:42 Uhr
Bilder ja @eisbehr
– Mons
22. August 2016 um 10:47 Uhr
Versuchen Sie, alle Bilder mit zur Seite hinzuzufügen z-index:-1 und position:fixed. Dann animieren Sie einfach die Opazitäten dieser Bilder. Hier ist HTML:
$(function() {
$("div.images-container img").fadeOut(0);
$("div.images-container img").last().fadeIn(0);
$("#main-menu-container").hover(function(){
$("div.images-container img").last().fadeToggle(500);
});
$("#main-menu-container li").hover(function(e) {
var $target = $(e.target);
var $menu = $("#main-menu-container li");
var index = $menu.index($target);
var $images = $("div.images-container img");
$images.eq(index).fadeToggle(500);
});
});
Hier habe ich die Reihenfolge der Bilder verwendet, um auszuwählen, welches Bild angezeigt werden soll. Für mehr Kontrolle können Sie IDs und Klassen verwenden. Hier ist eine Geige: https://jsfiddle.net/eoppskvL/
PS Ich besitze keines der Bilder in der Geige, falls ich das sagen muss.
Okey, also habe ich es herausgefunden. Danke für eure Hilfe Leute!
Lieber Freund, Sie würden versuchen, etwas Ähnliches wie diese Seite zu implementieren? verb.studio/Fallstudien Oder Zufall bist du dafür verantwortlich?
– Ricardo Viana
22. August 2016 um 12:49 Uhr
etwas ähnliches ja @user1906245
– Mons
23. August 2016 um 6:51 Uhr
Leider können Sie das Hintergrundbild eines Elements nicht animieren. Du könntest benutzen dieser Trick um einen transparenten Hintergrund hinzuzufügen und die Deckkraft der zu animieren :after Pseudo-Element.
14284900cookie-checkWie ändere ich das Hintergrundbild des Körpers beim Bewegen des Menüeintrags?yes
Ihr Code oben sollte gut funktionieren. Hast du irgendwelche Fehler oder was ist das Problem? jsfiddle.net/crjzsL1z
– Eisbehr
22. August 2016 um 8:35 Uhr
@eisbehr Ich denke, seine Frage ist, wie man die verblassende oder hüpfende Animation hinzufügt, er weiß, dass sein Code funktioniert.
– Hulothe
22. August 2016 um 8:44 Uhr
Die Frage ist, wie füge ich dem Code ein zweites Element hinzu, zum Beispiel #menu-item-18, damit es trotzdem funktioniert, und wie füge ich zum Beispiel die Animationsblende oder etwas anderes hinzu? Ich würde gerne sehen, wie sich der Hintergrund auf eine sanfte, schöne oder coole Weise ändert.
– Mons
22. August 2016 um 8:46 Uhr
Sie sollten uns auch Ihr Menü-HTML zeigen, dann können wir nach dem besten Weg suchen, um mehr Zuhörer hinzuzufügen. @mons
– Eisbehr
22. August 2016 um 8:47 Uhr
html @eisbehr hinzugefügt
– Mons
22. August 2016 um 9:53 Uhr