jquery - 如何将 Backstretch.js 与 viewportWidth 一起使用？

Question

我想根据视口宽度选择图像。不幸的是，我无法让它工作。仅显示“else”-case，因此 if 函数不起作用。你能帮我吗？

我的代码：

jQuery(document).ready(function ($) {

var viewportWidth = $(window).width();

if (768 < viewportWidth) {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/beach-sunset-traces-2730-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
} else if (1024 < viewportWidth) {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/beach-ocean-sea-2728-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
} else {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/boat-ocean-railing-2719-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
}
});

您也可以在JSFiddle中找到它。

Answer 1

当我尝试并颠倒顺序时

viewportWidth < 768对比versus < viewportWidth

viewportWidth < 1024相对1024 < viewportWidth

它似乎工作正常。