用jQuery切換DIV背景圖片

183

我正在爲我工作的公司製作展開/摺疊通話費率表。我目前有一張桌子，下面有一個按鈕來展開它，按鈕顯示「展開」。它是功能性的，除了我需要點擊按鈕時更改爲「摺疊」，然後當它再次點擊時返回到「展開」。在按鈕上書寫是背景圖像。用jQuery切換DIV背景圖片

所以基本上我所需要的只是改變一個div的背景圖像，當它被點擊時，除了有點類似於切換。

來源

2008-10-31 zuk1

爲什麼背景圖像？爲什麼不*文字*？ – 2012-09-04 19:41:24

我投票因爲他幾年後不接受答案，希望他可以通過@ user1040899！ – gsamaras 2015-12-09 03:33:58

@ user1040899 zuk1最後一次訪問`08年8月9日0：42`在** SO **也許這就是爲什麼，:( – 2016-11-03 11:17:20

402

$('#divID').css("background-image", "url(/myimage.jpg)");

應該做的伎倆，只是把它掛在點擊事件的元素上做到這一點

$('#divID').click(function() 
{ 
    // do my image switching logic here. 
});

來源

2008-10-31 14:31:48 Nick

這是jquery對話框的好回答。 – 2013-03-19 23:29:28

爲我工作。^^謝謝！ – khailcs 2016-05-06 23:44:48

這是否與SVGs一起工作？ – 2016-12-02 07:27:13

一種方法是將兩個圖像的HTML，SPAN或DIV中，您可以使用CSS隱藏缺省值，也可以在頁面加載時隱藏缺省值。然後你可以切換點擊。下面是我使用把左/向下圖標名單上的一個類似的例子：

$(document).ready(function(){ 
    $(".button").click(function() { 
     $(this).children(".arrow").toggle(); 
      return false; 
    }); 
}); 

<a href="#" class="button"> 
    <span class="arrow"> 
     <img src="/images/icons/left.png" alt="+" /> 
    </span> 
    <span class="arrow" style="display: none;"> 
     <img src="/images/down.png" alt="-" /> 
    </span> 
</a>

來源

2008-10-31 14:32:48 alexp206

如果您使用的背景圖像的CSS精靈，你可能碰到的背景偏移+/- ň根據像素無論你是在擴張還是在崩潰。不是切換，而是比切換背景圖片網址更接近它。

來源

2008-10-31 14:32:54

獎勵：如果您使用單獨的圖像，則只有加載時顯示的圖像是實際加載。在加載第二個狀態之前切換圖像時會有小的延遲。有了精靈，你只有一個圖像，它已經在那裏。 – Lasar 2008-10-31 15:29:04

這適用於WinXP上的所有當前瀏覽器。基本上只是檢查當前的背景圖像是什麼。如果是image1，則顯示image2，否則顯示image1。

jsapi的東西只是從谷歌CDN加載jQuery（更容易測試桌面上的misc文件）。

該替換是爲了跨瀏覽器兼容性（opera和ie將引號添加到url和firefox，chrome和safari刪除引號）。

<html> 
    <head> 
     <script src="http://www.google.com/jsapi"></script> 
     <script> 
      google.load("jquery", "1.2.6"); 
      google.setOnLoadCallback(function() { 
      var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)'; 
      var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)'; 

      $('.mydiv').click(function() { 
       if ($(this).css('background-image').replace(/"/g, '') == original_image) { 
        $(this).css('background-image', second_image); 
       } else { 
        $(this).css('background-image', original_image); 
       } 

       return false; 
      }); 
      }); 
     </script> 

     <style> 
      .mydiv { 
       background-image: url('http://stackoverflow.com/Content/img/wmd/link.png'); 
       width: 100px; 
       height: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="mydiv">&nbsp;</div> 
    </body> 
</html>

來源

2008-10-31 14:33:57 enobrev

只是做了這個例子。這樣，整個代碼片段就可以獨立運行。 – enobrev 2008-10-31 14:44:13

我發現在一個論壇上的解決方案，Toggle Background Img。

來源

2010-03-24 15:43:47

我個人只會使用JavaScript代碼在2個類之間切換。

讓CSS概括你需要的所有東西然後減去背景規則，然後將兩個類（例如：expanded &摺疊）作爲每個具有正確背景圖像（或使用精靈的背景位置）的規則。

CSS與不同的圖像

.div { 
    /* button size etc properties */ 
} 

.expanded {background: url(img/x.gif) no-repeat left top;} 
.collapsed {background: url(img/y.gif) no-repeat left top;}

或者CSS與圖像精靈

.div { 
    background: url(img/sprite.gif) no-repeat left top; 
    /* Other styles */ 
} 

.expanded {background-position: left bottom;}

則...

JavaScript代碼的圖像

$(function){ 
    $('#button').click(function(){ 
     if($(this).hasClass('expanded')) 
     { 
      $(this).addClass('collapsed').removeClass('expanded'); 
     } 
     else 
     { 
      $(this).addClass('expanded').removeClass('collapsed'); 
     } 
    }); 
}

JavaScript和精靈

注：優雅toggleClass不會在Internet Explorer 6中工作，但低於addClass/removeClass方法將正常工作在這種情況下也是如此

最優雅的解決方案（可惜不是Internet Explorer 6型）

$(function){ 
     $('#button').click(function(){ 
      $(this).toggleClass('expanded'); 
     }); 
    } 

$(function){ 
     $('#button').click(function(){ 
      if($(this).hasClass('expanded')) 
      { 
       $(this).removeClass('expanded'); 
      } 
      else 
      { 
       $(this).addClass('expanded'); 
      } 
     }); 
    }

據我所知，這種方法將工作翻過瀏覽器，我會感到更加舒適，CSS和類打得比與URL變化在腳本中。

來源

2010-09-27 23:12:11 Kelly

有兩種不同的方法可以用jQuery來更改背景圖像CSS。

$('selector').css('backgroundImage','url(images/example.jpg)');
$('selector').css({'background-image':'url(images/example.jpg)'});

仔細看注意的差異。在第二個中，您可以使用傳統的CSS並將多個CSS屬性串起來。

來源

2011-02-07 00:39:21 Ecropolis

這是我如何做到這一點：

CSS

#button{ 
    background-image: url("initial_image.png"); 
} 

#button.toggled{ 
    background-image:url("toggled_image.png"); 
}

$('#button').click(function(){ 
    $('#my_content').toggle(); 
    $(this).toggleClass('toggled'); 
});

來源

2012-01-11 22:30:08 Loupax

CSS精靈效果最好。我嘗試切換類並使用jQuery處理'background-image'屬性，但都沒有成功。我認爲這是因爲瀏覽器（至少最新的穩定Chrome）無法「重新加載」已經加載的圖像。

獎勵：CSS Sprites下載速度更快，顯示速度更快。減少HTTP請求意味着更快的頁面加載。減少HTTP的數量是改善前端性能的最佳方式，所以我建議始終使用此路線。

來源

2012-03-05 19:06:50 DjebbZ

這是一個相當簡單的迴應改變網站的背景與項目

function randomToN(maxVal) { 
    var randVal = Math.random() * maxVal; 
    return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0); 
}; 
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images 
    ram = list[parseFloat(randomToN(list.length))], // Random 1 to n 
    img = ram == undefined || ram == null ? list[0] : ram; // Detect null 
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background

來源

2012-05-15 00:47:21

舊文章的列表，但是這將允許您通過使用圖像精靈和調整重複以及定位使用CSS屬性的簡寫（背景，重複，左上）。

$.each($('.smallPreview'), function(i){ 
    var $this = $(this); 

    $this.mouseenter(function(){ 
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0'); 
    }); 

    $this.mouseleave(function(){ 
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0'); 
    }); 

});

來源

2012-06-19 14:18:47 bphillips

我做了我的正則表達式，因爲我想保留一個相對路徑，而不是使用add addClass函數。我只是想讓它變得複雜，哈哈。

$(".travelinfo-btn").click(
      function() { 
       $("html, body").animate({scrollTop: $(this).offset().top}, 200); 
       var bgImg = $(this).css('background-image') 
       var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1) 
       if(bgImg.match(/collapse/)) { 
        $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand')); 
        $(this).next(".travelinfo-item").stop().slideToggle(400); 
       } else { 
        $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse')); 
        $(this).next(".travelinfo-item").stop().slideToggle(400); 
       } 
      } 
     );

來源

2013-03-28 14:15:44 user2220104

礦是動畫：

$(this).animate({ 
    opacity: 0 
}, 100, function() { 
    // Callback 
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){ 
     // Callback of the callback :) 
     $(this).animate({ 
      opacity: 1 
     }, 600) 
    });  
});

來源

2016-07-06 09:31:08 yPhil

用jQuery切換DIV背景圖片

回答

相關問題