Question

我在响应式网站中使用Supersized时遇到问题。如果窗口宽度低于480px，则应超过Supersized。如果我再次调整窗口宽度大于480px，则应重新初始化Supersized。我有这段代码：

$(document).ready(function() {
        var newWindowWidth = $(window).width();
        if(newWindowWidth < 480){
            $("#supersized").remove();
        } else {
            $.supersized({
                slides: [{ image: 'images/bg.jpg', title: ''}]
            });
        }
    });
    $(window).resize(function() {
        var newWindowWidth = $(window).width();
        if(newWindowWidth < 480){
            $("#supersized").remove();
        } else {
            /*var loadSupersizedDiv = jQuery('<div id="supersized"></div>').appendTo(document.body);*/
            $.supersized({
                slides: [{ image: 'images/bg.jpg', title: ''}]
            });
        }
    });

我知道这不是完美的，但我现在遇到的问题是，超大的div与调整大小的每个像素重复。有办法解决这个问题吗？

谢谢！

Answer 1

您必须检查是否已加载超级大小，如果没有，则加载。现在它加载每个调整大小。

$(window).resize(function() {
    var newWindowWidth = $(window).width();
    if(newWindowWidth < 480){
        $("#supersized").remove();
    } else if ($("#supersized").length == 0 && newWindowWidth > 480) {
        var loadSupersizedDiv = jQuery('<div id="supersized"></div>').appendTo(document.body);

        $.supersized({
            slides: [{ image: 'kazvan-1.jpg', title: ''}]
        });
    }
});

好的，测试它，基本上它只是检查#supersized是否已存在然后不创建新的。

Answer 2

您可以尝试使用$("#supersized").width(x)或$("#supersized").css('width', x + 'px')，而不是删除和重新创建元素。

在调整大小时销毁jQuery Supersized

2 个答案: