0

我正在开发一个涉及jQuery Roundabout的新项目。我已经按照我想要的方式设置了大部分样式（我将添加不同的边框和填充，但这不是问题），但目标市场经常调整页面大小（不要问，我不太清楚为什么任何一个）。

所以这给我带来了我的问题，当我访问我的项目站点时：http ://cirkut.net/sub/proven/landing/它加载并且回旋处工作得很好，但是在调整大小时，我希望它“重绘”并重新-居中环岛。调整大小时，单击其中一项，它将“重绘”并再次居中。

这是我的回旋电话：

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

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

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

然而，发生的事情是它正在转发新<li>的 's 并重新迂回它们，这会缩小图像。

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

4

3 回答 3

0

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

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

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

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

于 2012-05-16T19:22:43.123 回答
0

您可以使用回旋处$focusbearing 属性：$minScale并$maxScale相对于前面的图像缩放转盘中的图像。这是一个例子：

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

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

于 2013-11-23T14:00:20.083 回答
0

我解决了在调整大小时刷新页面的问题：

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

$(window).resize(function() {
if(windowWidth != $(window).width()){
location.reload();
return;
}
});
于 2014-02-28T17:50:58.573 回答