Question

我正在使用roundabout plugin为旋转木马制作动画，一切正常，但我无法像the image中那样代表我想要的旋转木马外观，this link代表我目前的代码结果。

我使用了可用选项的插件值，但遗憾的是仍无法像图片中那样定位项目，我也想知道如何设置<li>尺寸。

我真的感到沮丧和吵架，我不知道这是不是因为我不够聪明或者什么。

$(document).ready(function() {
    $('#sample-roundabout').roundabout({
        tilt: 0.9,
        minScale: 1,
        maxsCale: 3,
        minOpacity: 1,
        duration: 400
    }, function() {
        $(this).fadeTo(500, 1);
    });
});

Answer 1

您需要将ul的宽度设置为较小的值，对于您想要获得的内容，请在CSS样式表中尝试类似的内容：

#sample-roundabout{
  width: 400px;
}

可能只是玩弄那个价值和倾斜，我认为你不会有太多时间让它发挥作用。

Answer 2

严格使用CSS，您可以执行like this：http://jsbin.com/ezukov/1/edit#html,live

ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 863px;
    height: 300px;
}
li {
    height: 220px;
    width: 621px;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
}
    li.roundabout-in-focus {
    margin-top:50px;
    background:red;
    cursor: default;
}

为了更进一步，您可以创建回调函数，以便在执行lazysusan动画之前平滑地动画中间幻灯片。或者，如果你想要不同的东西，你可以创建自己的roundabout shape animation。

是否可以通过环形插件获得这个旋转木马？

2 个答案: