javascript - 即时更改背景图像

Question

然而，有人问了这个问题，并不是特别想达到我想要完成的效果......

我刚刚完成了 Javascript 课程，并为我的网站编写了一个小脚本。它使用 Gantry 框架，并且在移动设备上运行得非常好。

如果您使用手机，并且将手机水平放置，它会调整该页面的大小，如果您将手机转为垂直，它会再次调整页面的大小。

所以我写了这个

var cWIDTH = window.innerWidth;
if (cWIDTH < 640 ){
    document.getElementById("swapme").style.backgroundImage = "url('/images/backgrounds/top-image2.jpg')";
}

但是，它不会即时更改，例如..如果我转动手机，除非我刷新页面，否则它不会改变背景。我一直在我网站上的文件中查找似乎对这种更改做出反应的 Ajax/jQuery/JSON 代码，因此我可以插入一个函数触发器。

但是，一旦页面加载，在您刷新页面之前是否已经设置了变量？

如何即时获取变量，并即时更改？

Answer 1

如前所述，您最好使用 CSS 媒体查询。
尝试这样的事情：

@media screen and (min-width: 641px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image1.jpg');
  }
}

@media screen and (max-width: 640px) {
  #swapme {
    background-image: url('/images/backgrounds/top-image2.jpg');
  }
}

Answer 2

您需要将您编写的代码挂钩到 window.onresize 事件，并包含一个 else 子句，用于何时切换回窗口大小。

话虽如此，在没有 JS 的情况下使用媒体查询更容易实现结果。

Answer 3

下面是我使用 phonegap 更改布局的一些示例代码。它利用了 css 3 的媒体查询。

    /* Ipad landscape mode */
    @media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: landscape) {
        article {
            float:left;
            padding-left: 55px;
        }
    }

/* Ipad portrait mode */
@media screen and (min-width: 760px) and (max-width: 1024px) and (orientation: portrait) {
    article {
        float: left;
        width: 340px;
        padding-left: 15px; 
    }
}

Answer 4

有一个事件可以检测设备方向何时发生变化。

window.onorientationchange = function(e) {
    switch(e.orientation) {
        case 0:
            //...
            break;
        case -90:
            //...
            break;
        case 90:
            //...
            break;
        default:
            break; 
    }
}