javascript - bgStretcher 插件 - 多个实例

Question

使用 jQuery 插件 bgStretcher 2（链接到插件），我试图<div>在一个页面上让各种 s 使用它的功能。但是，该插件似乎只支持每页一个实例，如果我进行多个$("#element").bgStretcher()调用，则只有第一个调用有效，而所有其他调用都将被忽略，并且控制台中会记录“多个 bgStretcher”。

有没有办法解决这个问题，或者是否有任何其他插件可以做类似的事情，即智能拉伸图像以填充元素？我试图破解这个插件的相关部分来做到这一点，但没有运气。

使用 background-size: 100% 不起作用，因为这不会垂直填充元素空间，它只会水平拉伸。

Answer 1

如果您的设计允许您一次只显示一个 bgstretcher 实例，您可以销毁活动的实例并创建另一个。

$('#slide1').bgStretcher.sliderDestroy();

$('#slide2').bgStretcher({
    images: imagesArray,
    imageWidth: 1600,
    imageHeight: 800,
});

Answer 2

您是否尝试添加容器ID？

el1.bgStretcher({
                containerId: "bgstretcher1",
                images : [...],
                ... further settings ...
})
el1.bgStretcher({
                containerId: "bgstretcher2",
                images : [...],
                ... further settings ...
})