Wie ändere ich das Hintergrundbild des Körpers beim Bewegen des Menüeintrags?

Lesezeit: 6 Minuten

Benutzeravatar von monss
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.

Bisher habe ich diesen Code:

    var $body = $('body');
    $('li:first-child').hover(function(){
        $body.css('background-image', 'url("img/dd.jpg")');
    }, function() {
        $body.css('background-image', '')
    })

Das html ist

<div id="main-menu-container">
    <ul>
       <li><a><span>One</span></a></li>

       <li><a><span>Two</span></a></li>

       <li><a><span>Three</span></a></li>      
    </ul>
</div>

Wie fahre ich fort und füge die Animation hinzu?

  • 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', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>

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', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>

  • 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:

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/39074492/mystyle.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="myscript.js"></script>
    </head>
    <body>
    <div class = "images-container">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
        <img src="img0.jpg">
    </div>
    <ul id = "main-menu-container">
        <li><a><span>One</span></a></li>
       <li><a><span>Two</span></a></li>
       <li><a><span>Three</span></a></li>
    </ul>
    </body>
</html>

CSS:

div.images-container img{
    z-index: -1;
    position: fixed;
    width:1600px;
    height: 900px;
}

ul#main-menu-container{
    position: relative;
    top:50px;
}

ul#main-menu-container li{
    font-weight: 500;
    font-family: sans-serif;
    background: #ed2389;
    border-color: #fff;
    border-width: 1px;
    float: left;
    color: white;
    list-style: none;
    padding: 8px;
    border-style: solid;
    border-collapse: collapse;
}

ul#main-menu-container li:hover{
    background: #fff;
    color: #ed2389;
    border-color: #ed2389;
}

Javascript:

$(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!

Die Html

<div id="main-menu-container">
    <ul>
        <li><a href="#"><span>One</span></a></li>
        <li><a href="#"><span>Two</span></a></li>
        <li><a href="#"><span>Three</span></a></li>
    </ul>
</div>

Das CSS

body {
    background: url("../img/back.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: background ease-in 1s;
    -moz-transition: background ease-in 1s;
    -o-transition: background ease-in 1s;
    transition: background ease-in 1s;
}

.background-0 {
background: url("../img/dd.jpg");
}
.background-1 {
background: url("../img/dd.jpg");
}
.background-2 {
    background: url("../img/dd.jpg");
}

Das Drehbuch

var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
    current_index = list_elements.index(this);
    $('body').addClass('background-' + current_index);

}).on('mouseleave', function(){
    $('body').removeClass('background-' + current_index);
    current_index = null;
});

  • 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.

1428490cookie-checkWie ändere ich das Hintergrundbild des Körpers beim Bewegen des Menüeintrags?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy