在您的规格中,您声明如果您有一定数量的按钮,比如“超过 x 个按钮”,您希望滑块出现。因此,您希望创建一个无论是否有滑块都看起来正常的导航栏。不幸的是,除非我能看到你的 CSS,否则我无法帮助你解决这方面的问题;我只能帮助你使用 jQuery。
首先,你必须写出你的条件:
if ($("button").length > x) { ...show slider...}
现在在我们继续之前,我想指出一个明显的事实,即制作滑块有很多不同的方法。无法查看您的代码(我知道此时我可能听起来像是破纪录,但您对 Stack Overflow 还是新手,所以这是我教您的),我能想到的最兼容的解决方案是创建导航栏并在左右两侧为滑块按钮留出足够的空间(我们将操纵visibility
属性来显示/隐藏它们,而不是display
属性 - 这也将防止导航栏在较慢的浏览器中跳跃加载) .
为了实现这一点,我们需要从按钮的两个元素(仅显示选择器)开始:
var buttonLeft = $("#buttonLeft");
var buttonRight = $("#buttonRight");
接下来,如果我们的条件为真,我们将要添加以下要运行的行:
buttonLeft.css("visibility", "visible")
.on("click.sliderLeft", function() {...show more on the left...};
buttonRight.css("visibility", "visible")
.on("click.sliderRight", function() {...show more on the right...};
现在在我们开始编写滑动函数之前,重要的是您要记住,当您希望滑块从左侧显示更多元素时,您实际上希望正在滑动的元素向右移动。
这也是脚本的另一部分,可以通过几十种方式实现。您选择的实现将主要基于您的 HTML 和 CSS。对于这个操作方法,我将简单地假设您将使用带有position: relative
和带有一些包装 div的滑动元素overflow: hidden
。
var navBar = $("#navBar"); // sliding element
下一步是确定要用于幻灯片效果的内容。为了方便起见(并且因为您使用的是引导程序-因此,无论如何,您更有可能使所有按钮的大小相同)我将假设您所有的导航按钮都具有相同的大小:
var navButtonWidth = $(".navButtons").width();
为了方便起见,我还将假设您将按钮的左右边距都设置为5px
. 我将进一步假设每个动画将花费 1000 毫秒。因此,您需要将以下行添加到单击处理程序中以用作幻灯片效果:
var slideAmount = navButtonWidth + 10; //button width plus margin left plus margin right
//left button
...
var slideLeftStr = "+=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...
//right button
...
var slideRightStr = "-=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...
差不多就是这样。您将不得不对其进行定制、自定义、添加一些条件以在栏位于末尾时禁用滑动效果、添加一些解决方法以防止双击等问题,但这应该会给您一个基本的开始点制作自己的动态幻灯片效果。
如果您有任何问题,请告诉我。祝你好运!:)
更新:
要回答有关使用按钮滑动到特定按钮的问题,答案是“是的,您可以这样做”,但您真正想要做的是滑动到下一个或上一个按钮的开始位置(分别)。我可以告诉你,这可能看起来很糟糕,但无论如何这里是代码:
...
//put this function outside of the click handlers
var slideTo = function (destButton) {
//destButton is the button you are sliding to
return destButton.offset().left + "px";
}
//put this in both click handlers
...
var destinationButton = ....get the previous or next button based on which handler you're in
navBar.animate({ left: slideTo(destinationButton) }, 1000);
...
但是,我建议的选项是编写一个单击处理程序,只要用户仍将鼠标悬停在按钮上,导航栏就会缓慢滑动。