Question

我正在使用jQuery来更改页面的背景图像。目前我正在使用两个不同的按钮将图像从图像A切换到图像B.默认情况下显示图像A.

我想要实现的是使用单个按钮更改图像，该按钮在单击时更改名称。

因此，对于图像A，按钮应该只是说放大，单击时，图像B显示在背景中，但按钮将显示缩小。

如果我没有清楚解释，请道歉。

app.debug = True

Answer 1

如果您在CSS中设置了类.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>

如何使用jQuery更改背景图像

4 个答案: