Question

我有一个jQuery文件，我用它来调整背景图像的大小，使它不会被拉伸或压扁。它看起来像这样;

(function ($) {
    var wheight = 0;
    var $imagebackground = 'images/bg2.jpg';
    var wwidth = 0;
    var ratio = 0;
    var img = new Image();
    img.src = $imagebackground;

    $(img).one('load', function (e) {

        ratio = img.width / img.height;
        $('#background-wrap').html(img);
        lets_scale();

    });

    if (img.complete) img.trigger('load');

    function lets_scale() {
        wheight = $(window).height();
        wwidth = $(window).width();

        $('#background-wrap').width(wwidth).height(wheight);

        if (wwidth / ratio >= wheight) // If the browser is wider than the image
        {
            $('#background-wrap img').css({
                'width': wwidth,
                'height': Math.ceil(wwidth / ratio),
                'margin-top': Math.ceil((wheight - wwidth / ratio) / 2)
            });
        } else {
            $('#background-wrap img').css({
                'height': wheight,
                'width': Math.ceil(wheight * ratio),
                'margin-left': Math.ceil((wwidth - wheight * ratio) / 2)
            });
        }
    }

    $(window).bind('resize', lets_scale);
    $(window).bind('orientationchange', lets_scale);

})(jQuery);

然后HTML就是这样;

<div id="background-wrap"></div>

该div的css是;

#background-wrap
{
  overflow:hidden;
}

我想获取变量$imagebackground并在用户悬停在mainnav div列表中时加载一个设置图像，背景图像会发生变化。我为每个链接设置了不同的li类，并希望将其传递给变量以进行背景图像更改。 div和列表的html是;

<div class="mainnav">
    <img src="images/logo.png" class="logo">
    <ul>
        <li class="nav1"><a href="hsna">Link1</a></li>
        <li class="nav2"><a href="life">Link2</a></li>
        <li class="nav3"><a href="happening">Link3</a></li>
        <li class="nav4"><a href="porchrokr">Link4</a></li>
    </ul>
</div>

似乎$imagebackground变量可以是一个函数，它根据用户在mainnav的列表中悬停来改变它的值，但我似乎被卡住将函数推入该变量< / p>

Answer 1

这是一个如何做到这一点的例子。

$('.mainnav').find('li').on({
    mouseenter: function() {
        var c = $(this).attr('class');
        $('#background-wrap').find('img').attr('src', 'images/' + c + '.jpg');
    },
    mouseleave: function() {
        $('#background-wrap').find('img').attr('src', 'images/bg2.jpg');
    }
});

http://jsfiddle.net/TC9SN/

在小提琴中，即使你看不到图像的变化。但是如果你使用firebug，你可以看到图像的来源发生了变化。

或者，您可以在容器中加载4张图像。除了最初的css之外，用css隐藏它们。然后，当您将鼠标悬停在列表上时，您可以简单地为div添加/删除类，以设置要显示的图像和要隐藏的图像。这样，更改它们时，所有图像都没有加载时间。但我想你也可以先加载所有图像

Answer 2

您希望在导航悬停时更改整页背景图像，同时保持宽高比？

从css-tricks.com为您的css试试这个。请点击该链接，了解如何通过css设置整页背景的其他示例。

html { 
  background: url(images/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

然后可以像这样设置你的列表：

<div class="mainnav">
    <img src="images/logo.png" class="logo">
    <ul>
        <li class="hoverbg" data-bgsrc="images/whatever1.jpg"><a href="hsna">Link1</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever2.jpg"><a href="life">Link2</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever3.jpg"><a href="happening">Link3</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever4.jpg"><a href="porchrokr">Link4</a></li>
    </ul>
</div>

然后你的jQuery看起来像这样：

$('.hoverbg').hover(
    function(){
        $('html').css('background-image','url('+$(this).data("bgsrc")+')');
    },
    function(){
        $('html').css('background-image','url(images/bg.jpg)');
});

然后你可以让css进行宽高比工作。

更新使用来自css-tricks的不同css全屏示例，以实现平滑过渡

HTML：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

<div class="mainnav">
    <img src="images/logo.png" class="logo">
    <ul>
        <li class="hoverbg" data-bgsrc="images/whatever1.jpg"><a href="hsna">Link1</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever2.jpg"><a href="life">Link2</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever3.jpg"><a href="happening">Link3</a></li>
        <li class="hoverbg" data-bgsrc="images/whatever4.jpg"><a href="porchrokr">Link4</a></li>
    </ul>
</div>

CSS：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

jQuery的：

$('.hoverbg').hover(
    function(){
        var newimg = $(this).data("bgsrc");
        $('#bg img').fadeOut('slow',function(){
            $(this).attr('src', newimg);
            $(this).fadeIn('slow');
        });
    },
    function(){
        $('#bg img').fadeOut('slow',function(){
            $(this).attr('src', 'images/bg2.jpg');
            $(this).fadeIn('slow');
    });
});

Jquery变量函数用于悬停在单独的元素中

2 个答案: