Question

如果窗口调整大小，我正在尝试编写更改background-image的{{1}}的代码。我的代码如下，但它不起作用。

body

谁能告诉我这里我做错了什么？

Answer 1

if语句，width()和css()函数以及body选择器的语法不正确。您还需要在窗口的resize事件上执行此代码。试试这个：

$(function() {
    $(window).resize(function() {
        if ($(this).width() < 1000) {
            $('body').css('background-image', "url('images/background-mobile.svg')");
        } else { 
            // default setting for desktop here...
            $('body').css('background-image', 'none');
        }
    });
});

所有这一切，你应该真正使用CSS媒体查询：

@media (max-width: 1000px) {
    body {
        background-image: url('images/background-mobile.svg');
    }
}

Answer 2

这一切都取决于你在这里寻找的东西 - 它是800px还是800px？你想让它在800px及以上或800以下变化吗？

如果您通过CSS处理此问题：

（我假设因为您的图片'background-mobile.svg'，您将要使用800px或更少的示例）

800px及以上

body {
  background-image:url('images/your-default-desktop-img.jpg');
}

@media screen and (min-width: 800px) {
  body {
    background-image:url('images/background-mobile.svg');
  }
}

800px或更少

body {
  background-image:url('images/your-default-desktop-img.jpg');
}

@media screen and (max-width: 800px) {
  body {
    background-image:url('images/background-mobile.svg');
  }
}

就jQuery / JavaScript解决方案而言，我会尝试这样的事情（基于你的原始代码）：

$(document).ready(function(){
  if ($(window).width() < 800){
    $('body').css("background-image":"url(images/background-mobile.svg)");
  } else {
      $('body').css("background-image":"url(images/background-desktop.svg)");
  }
});

另外，我刚刚注意到，你的原始函数不起作用的原因是很可能是，因为你忘了将你的“body”选择器用jQuery的单引号括起来 - 它正在进行将$（body）视为变量。

Answer 3

调用.width（“value”）时，该值可以是字符串（数字和单位）或数字。

您在示例中指定了一个数字和一个单位，因此，您需要传递一个字符串。

.width(1000px) //incorrect
.width("1000px") //correct

除此之外，您的代码不会检查窗口的大小，而是将其设置为指定的值，而不是您希望在这种情况下实现的值。

你应该做这样的事情：

if ($(window).width() < 1000){
    //do stuff
}

Answer 4

我强烈建议您使用CSS。 @media规则专门用于此目的。 W3Schools有一个页面，几乎涵盖了您使用CSS所要做的事情：CSS Media Rule

Answer 5

在你的CSS中

.changeBackgroundClass
{
    background-image:url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}

@media screen and (min-width: 800px)
{
    .changeBackgroundClass
    {
        background-image:url('http://wikipics.net/photos/20150125142221651988185.jpg');
    }
}

Answer 6

试试这个：

$(document).ready(function() {
    var thisWidth = $(this).width();
        if (thisWidth < 1000) {
            $('body').css('background-image', "url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQpRqXxjfL2LiYNRcl1TDaEkI8EPqxNvw5-O4Z6WhgF6sTuWbz-')");
        } else { 
            // default setting for desktop here...
            $('body').css('background-color', 'red');
        }
});

在这里摆弄：http://jsfiddle.net/q82L5myj/

如果窗口的宽度调整为800px，则更改背景图像

6 个答案: