0

我正在为一个有 3 个类别的网站编写一个简单的滑动面板脚本，每个类别都是一个面板，但我很难使用宽度百分比。

我为此创建了 d jsfiddle：http: //jsfiddle.net/estebanrao/FZ6ea/

HTML：

<div class="cat-selector">
    <a href="#" class="cat-s-notebooks">Notebooks</a>
    <a href="#" class="cat-s-desktops">Desktops</a>
    <a href="#" class="cat-s-smartphones">Smartphones</a>
</div>

CSS：

.cat-selector {
    font-size: 0;
    text-align: center;
}
.cat-selector > a {
    display: inline-block;
    height: 200px;
    width: 33%;
}
.cat-s-notebooks {
    background: red;
}
.cat-s-desktops {
    background: green;
}
.cat-s-smartphones {
    background: blue;
}

JS：

$('.cat-selector')
    .on('mouseenter', 'a', function () {
    $(this).animate({
        width: '39%',
    }, 300, 'swing')
    $(this).siblings('a').animate({
        width: '30%',
        opacity: 0.5
    }, 300, 'swing')
})
    .on('mouseleave', 'a', function () {
    $(this).stop().animate({
        width: '33%',
    }, 300, 'swing')
    $(this).siblings('a').stop().animate({
        width: '33%',
        opacity: 1
    }, 300, 'swing')
});

如果您看一下示例，您会注意到 3 个面板的总宽度始终为 99%。问题是我希望这个尺寸总是尽可能地将关闭数字匹配到 100%。

我尝试使用小数（.33），但它只会变得更糟。我还尝试获取窗口的总宽度并从那里进行数学计算，但这也是一次失败的尝试。

为了达到 100% 的百分比（或最接近的小数），我还缺少什么吗？

提前致谢！

4

1 回答 1

0

为了解决这个问题，我刚刚添加了一个容器 div

<div class="cat-selector-container">

带有 css 属性

.cat-selector-container { overflow: hidden; white-space: nowrap; width: 100%; }

我真的不需要那个容器，我可以把这个 css 添加到我的 .cat-selector div 中，但是因为我有一些顶部填充，所以我添加了这个额外的 div 以避免滚动条。

于 2013-10-30T13:35:35.397 回答