Question

我有一个菜单，我需要在每个菜单项上将身体背景更改为不同的图像。此外，它会很好，如果它会褪色或反弹或做一些漂亮和干净的变化。

到目前为止，我有这段代码：

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

html是

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

如何继续添加动画？

Answer 1

您只需选择要更改背景的项目即可。

＆＃13;

var $body = $('body');
$('#main-menu-container li a').hover(function(){
    $body.css('background', 'red');
}, function() {
    $body.css('background', '')
})

＆＃13;

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

＆＃13;

如果你想要一个不同的背景，你需要以某种方式存储它们。可能是菜单上的data属性，或创建对象，存储图像或其他内容。

＆＃13;

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', '')
})

＆＃13;

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

＆＃13;

Answer 2

尝试使用z-index:-1和position:fixed将所有图片添加到页面中。然后只是动画那些图像的不透明度。这是HTML：

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="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);
    });
});

在这里，我使用图像的顺序来选择要显示的图像。要获得更多控制，您可以使用ID和类。这是一个小提琴：https://jsfiddle.net/eoppskvL/

P.S。如果我需要说的话，我不会拥有小提琴中的任何图像。

Answer 3

哦，好吧，我明白了。谢谢你的帮助！

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>

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");
}

脚本

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;
});

Answer 4

很遗憾，您无法为元素的背景图像设置动画。您可以使用this trick添加透明背景并为:after伪元素的不透明度设置动画。

如何在菜单项悬停上更改正文背景图像？

4 个答案: