Question

我正在开展一个涉及jQuery Roundabout的新项目。我已经把所有东西都按照我想要的方式设置（我将添加不同的边框和填充，但这不是问题），但目标市场经常调整页面大小（不要问，我不确定为什么任一）。

所以这让我想到了我的问题，当我去我的项目网站时：http://cirkut.net/sub/proven/landing/它加载并且环形交叉口运行良好，但在调整大小时，我希望它“重绘”并重新定位环形交叉口。调整大小时，单击其中一个项目，它将“重绘”并再次居中。

这是我的迂回电话：

$('#slides').roundabout({
    easing: 'easeInOutQuart',
    responsive: true
});

这就是我试图避免这个问题：

$(window).bind("resize", function() {
    $('#slides').roundabout("relayoutChildren");
});

然而，发生的事情是它正在传递新的<li>并重新绕过它们，这会缩小图像。

任何人都可以对此提供任何见解吗？谢谢！

Answer 1

在摆弄多个选项之后，我找到了一个可行的选项。

而不是上面的"resize"绑定，我使用下面的内容，它刷新很棒。

$(window).bind("resize", function() {
    $('#slides .slide').removeAttr("style");
    $('#slides').roundabout({
        easing: 'easeInOutQuart',
        responsive: true
    });
});

我发现内联CSS就是它的定位，如果我重新环绕它，它会根据当前大小改变大小，这会导致调整大小时无限的“调整大小”循环。因此，如果我删除内联样式然后立即将#slides放回环形交叉口，它会正确定位并重新添加内联样式。

Answer 2

您可以使用环形交叉口$focusbearing属性：$minScale和$maxScale来缩放转盘中相对于前面的图像。这是一个例子：

     $('#slides').roundabout({
      easing: 'easeInOutQuart',
      responsive: true ,
      minScale: 0.8
 });

这将使图像保持成比例。如果要使用较少数量的图像，请增加缩放比例，反之亦然。

Answer 3

我在resize上解决了这个刷新的页面：

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

$(window).resize(function() {
if(windowWidth != $(window).width()){
location.reload();
return;
}
});

jQuery Roundabout重绘/调整大小问题

3 个答案: