1

这是我试图带来滑动效果的javascript函数。

我想要的是，单击右键（绿色按钮）后，滑动效果应该将选项卡替换为另一个选项卡，都是块元素。

但是，效果不起作用，我确信我的 jquery 代码有问题。（淡入淡出效果在左侧按钮（橙色按钮）上效果很好。

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        if (iActiveNo != 1 || iActiveNo != 0)
        {
            $(eTabsDiv.children[iActiveNo - 1]).stop() .animate({"left" : "300px"}, 500);
            eTabsDiv.children[iActiveNo - 1].style.display = "none";
            eTabIndDiv.children[iActiveNo - 1].style.backgroundColor = "rgb(122,121,198)";            
        }
        **$(eTabsDiv.children[iActiveNo]).stop() .animate({"left" : "300px"}, 500);**
        eTabsDiv.children[iActiveNo].style.display = "block";
        eTabIndDiv.children[iActiveNo].style.backgroundColor = "rgb(0,100,200)";        
    }
    activateFeaturesContainer(direction);
    return iActiveNo;
}

这是完整的代码（相当长），但它给出了我想要达到的效果的想法。

提琴手

4

2 回答 2

1

我想你想要的是这样的：http: //www.apple.com/macbookair/

为此，您首先必须给出div#features一个overflow: hidden，否则，在向左行驶/从右侧进入时，内容不会被隐藏。

然后，您必须将ul新内容放置在可视区域之外并使其可见，否则新内容不会从右侧进入（假设它是您想要的）。在您的情况下，您必须设置left: 292; display: block. 现在，您同时选择旧的和新的ul并应用left: '-=292px'. 然后你隐藏旧的。那应该差不多了。

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});

笔记：

  • 由于overflow: hidden，您必须设置一个明确定义的高度。height: auto不再有任何意义，因为 div 不再随内容增长。理想情况下，您可以通过 JS 将高度调整为其子级。

  • 我正在使用您代码中的静态值来做一个简单的解释。如果div#features改变宽度，你也必须在代码中改变它。为了更好地维护，我建议您获取div#featureswith的宽度.outerWidth()，并将您的动画基于该值

于 2011-10-11T14:17:56.017 回答
1

看起来你真正想做的是在左右按钮之间创建一个 div，里面有 5 个 li 标签，它们位于水平行中，然后像旋转木马一样将它们左右移动用户单击左右按钮。

不幸的是，如果你在任何浏览器中使用 DOM Inspector，你会发现你将 CSS 放在一起的方式，5 个 li 标签实际上是在一个垂直列中运行，导致代码有点乱。

我会在 ul id=tabs 周围放置一个 div 并将其设置为选项卡当前占用的宽度，然后溢出：隐藏。然后我将里面的 ul 设置为 5 个元素的宽度，并在每次单击左或右时将其左属性移动一个选项卡的宽度。

您还可以查看源代码： http ://www.baijs.nl/tinycarousel/ （右上角，“源代码”）或将其用于您的动画。

于 2011-10-11T16:21:02.380 回答