JS/jQuery的交換圖像

我有一個網站的菜單，功能就像這樣：http://jsfiddle.net/sinky/XYGRW/（發現這裏的計算器）JS/jQuery的交換圖像

我的問題是，設計者希望在導航標誌（主頁按鈕），以切換到較小的圖標。不只是縮小，而是實際改變圖像。我可以使用其他addClass命令已經使用的滾動事件來更改img src嗎？

$(window).scroll(function() { 
    if ($(document).scrollTop() == 0) { 
     $('#header').removeClass('tiny'); 
     $('#menu-spacing').addClass('nav-margin-top'); 
    } else { 
     $('#header').addClass('tiny'); 
     $('#menu-spacing').removeClass('nav-margin-top') 
    } 
}); 


HTML 
<div id="header" class="header fixed">  
    <div class="contain-to-grid"> 
      <nav class="row top-bar"> 
       <ul class="title-area"> 
        <li><img src="img/resolute_logo.png" width="195" height="103" alt=""/> </li> 
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> 
       </ul> 
       <div id="menu-spacing" class="hide-for-medium-down nav-margin-top">

來源

2013-10-16 bradmagnus

肯定的：

$(window).scroll(function() { 
    if ($(document).scrollTop() == 0) { 
     $('#header').removeClass('tiny'); 
     $('#menu-spacing').addClass('nav-margin-top'); 
     $('.title-area img').attr('src', 'img/resolute_logo.png'); 
    } else { 
     $('#header').addClass('tiny'); 
     $('#menu-spacing').removeClass('nav-margin-top'); 
     $('.title-area img').attr('src', 'your-new-image.png'); 
    } 
});

裁判：http://api.jquery.com/attr/

來源

2013-10-16 14:44:28

謝謝！我會再看看更多。 – bradmagnus

很酷，隨時標記爲答案，如果它幫助你:) –

我會馬上標記它。沿着同樣的路線，是否有可能使圖像快速交叉淡入淡出，這樣就不會有太大的跳躍？ – bradmagnus

爲什麼不直接將圖片添加到您的CSS？

.header.tiny { 
    height:40px; 
    background: url(...); 
}

的代碼的其餘部分，你已經有

在jsfiddle

來源

2013-10-16 14:46:23

感謝您的建議。我正在使用Foundation 4，但我無法弄清楚如何使用背景圖片。我是基金會的忠實粉絲，但有時候事情是不必要的複雜的......這個時候硬編碼圖像對我來說最有意義。 – bradmagnus

JS/jQuery的交換圖像

回答

相關問題