如何使用jQuery更改背景圖片

Question

我正在使用jQuery來更改頁面的背景圖像。 目前，我使用兩個不同的按鈕將圖像從圖像A切換到圖像B。默認情況下顯示圖像A。

我要實現的是用一個按鈕更改圖像，單擊該按鈕即可更改名稱。

因此，對於圖像A，按鈕應僅顯示“放大”，而在單擊時，背景中將顯示圖像B，但按鈕將顯示“縮小”。

抱歉，如果我沒有清楚解釋。

jQuery(document).ready(function() {
   var images = ['image-A.gif'];

   var url = images[Math.floor(Math.random() * images.length)];
  var img = new Image();
  img.onload = function(){
    jQuery('#test').css({'background-image': 'url('+url+')','background-size' : 'cover', 'background-position' : '50px 0'});
jQuery('#test').fadeIn(1000);
  }
  img.src = url;


});
  jQuery(function(){

jQuery("#aChange").click(function(){

    jQuery("#test").css("background-image", "url(image-B.gif)");
    jQuery("#test").css("background-position", "50px -100px");
    jQuery("#test").css("background-repeat", "no-repeat");
    jQuery("#test").css("background-size", "cover");

    return false;
});     

jQuery("#bChange").click(function(){

    jQuery("#test").css("background-image", "url(image-A.gif)");
    jQuery("#test").css("background-position", "50px 0");
    jQuery("#test").css("background-repeat", "no-repeat");
    jQuery("#test").css("background-size", "cover");

    return false;
});

});

Answer 1

如果您在.image1 { background-image:url("here") }設置類.image1 { background-image:url("here") }和.image2 { background-image:url("here") }

然后將一個應用於背景元素，您可以像這樣在兩者之間切換

$('#theButton').click(function(){
    $('#background').toggleClass('image1').toggleClass('image2');
});

另外，您知道您可以將所有這些.css函數放在一個“行”上嗎？

$('.this').css({
    'color':'green',
    'border':'1px solid black',
    'position','absolute'
});

如果您像這樣進行編碼，那么您會錯過jQuery的要點

Answer 2

嘗試這個。 只有一個ID為aChange按鈕。

 jQuery(function() { jQuery('#aChange').click(function() { var text = jQuery('#aChange').val(); if (text == "Zoom In") { jQuery("#test").css("background-image", "url(image-B.gif)"); jQuery("#test").css("background-position", "50px -100px"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } else { jQuery("#test").css("background-image", "url(image-A.gif)"); jQuery("#test").css("background-position", "50px 0"); jQuery("#test").css("background-repeat", "no-repeat"); jQuery("#test").css("background-size", "cover"); } jQuery('#aChange').val(text == "Zoom In" ? "Zoom Out" : "Zoom In"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="aChange" type="button" value="Zoom In"> 

Answer 3

$('.Zoom').click(function(){
    var $this = $(this);
    $this.toggleClass('Zoom');
    if($this.hasClass('Zoom')){
        $this.text('Zoom'); 
        $("html").css("background-color","yellow");
    } else {
        $this.text('Zoom Out');
        $("html").css("background-color","green");
    }
});

如果我理解很好，這可能會對您有所幫助。 檢查一下： http : //jsfiddle.net/V4u5X/703/

Answer 4

您可以使用最少的jQuery和一點CSS來實現。 請參閱以下內容。

 $("button").on("click", function() { $("body").toggleClass("img2"); $(this).text(function(i, text) { return text.indexOf("In") !== -1 && "Zoom Out" || "Zoom In"; }); }); 

 body { width: 100%; height: 100%; background-image: url("http://news.bbcimg.co.uk/media/images/76132000/jpg/_76132132_z3551404-blue_morpho_butterfly-spl.jpg"); background-position: 50px 0; background-repeat: no-repeat; background-size: cover; } body.img2 { background-image: url("http://wallerz.net/wp-content/uploads/2014/10/4049_butterfly.jpg") } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Zoom In</button>