Jquery懸停在單獨元素中的可變函數

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

我想，當用戶在mainnav DIV列表徘徊採取可變$imagebackground和加載一組圖像有背景圖像的變化。我爲每個鏈接設置了不同的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徘徊在列表中改變它的值的函數，但我似乎被卡住搡功能成可變

Answer 1

看起來你想有一個完整的頁面背景圖像在導航懸停時發生變化，但仍保持縱橫比？

試試這個爲你的CSS，從css-tricks.com。關於如何通過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做長寬比工作。

UPDATE使用來自CSS-花樣不同的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'); 
    }); 
}); 

Answer 2

這是你如何做到這一點的一個例子。

$('.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/

在小提琴，即使你無法看到圖像的變化。但是，如果你使用螢火蟲，你可以看到圖像源的變化。

或者，您可以在容器中加載4個圖像以開始。用css把它們全部隱藏起來，除了最初的那個。然後，當您懸停列表時，您可以簡單地添加/刪除div的類，以設置要顯示哪個圖像以及要隱藏哪個圖像。通過這種方式，在更改所有圖像時不會有加載時間。但我想你也可以預先加載所有的圖像