Question

我有两个背景图片，我想用jQuery更改它。

对于#banner来说，它可以工作，但是我现在不怎么写@media screen and (max-width: 1024px)的代码

.banner {
  background: url(../images/640px.jpg) 0px 0px no-repeat;
}

@media screen and (max-width: 1024px) {
  .banner {
    background: url(../images/900px.jpg) 0px 0px no-repeat;
  }
}

var selectData = {

  "bmw": {

    "1": "316i",
    "100": "520i",
    "101": "740i",
    "image1": "images/640px.jpg",
    "image2": "images/900px.jpg",

  },

};

jQuery(document).ready(function($) {
  $(document).on('click', '.specialLink', function(event) {
    var radio2 = document.getElementById('radio2');
    if (radio2.checked == false) {
      radio2.checked = true;
      toggleRadio();
    }
    $(".regio").html($(this).text());
    event.preventDefault();
    var b = $(this),
      background_image = '';
    buttonId = b.attr('id'),
      selectSet = selectData[buttonId],
      selectField = $('#specialLink');
    selectField.empty();
    //To change the background image of website
    $("#banner").css('background-image', 'url("' + selectSet.image1 + '")');
    $("@media screen and (max-width: 1024px)").css('background-image', 'url("' + selectSet.image2 + '")');
    if (selectSet) {
      //Remove image index form selectSet
      $.each(selectSet, function(k, v) {
        if (typeof k === 'string' && k === 'image') {
          return true;
        }
        selectField.append($('<option>', {
          value: k,
          text: v
        }));
      });
    }
    return false;
  });
});

Answer 1

您可以使用jQuery (window).resize()函数，它将在调整浏览器窗口大小时触发。

这是一个使用jQuery，javascript和CSS处理调整大小事件的示例。（如果您只是通过调整大小来设置样式（媒体查询），则最好的方法是CSS） http://jsfiddle.net/CoryDanielson/LAF4G/

将此代码用于所需的解决方案。

$(window).resize(function(){
    if ($(window).width() <= 1024){ 
        $('.banner').css('background-image', 'url(' + imageUrl + ')');
    }   
});

希望这对您有所帮助。

Answer 2

您可以使用html5的图片标签更改图片

<picture>
    <source media="(min-width: 650px)" srcset="img1.jpg">
    <source media="(min-width: 465px)" srcset="img2.jpg">
    <img src="img3.jpg">
</picture>

如何使用jQuery更改媒体查询CSS

2 个答案: