菜单转换/动画

时间:2013-01-22 18:14:53

标签: javascript html animation css-transitions

好吧所以我对菜单有这个想法,但我真的不知道如何实现它或者需要什么,我对网页设计很新。所以基本上当菜单上的项目突出显示时,我希望滑块在高亮显示的项目下移动,如此

http://s7.postimage.org/qa3vfh797/purple.gif

因此,当我在页面上时,我想要与页面相关的菜单选项卡下的滑块。当我将鼠标悬停在菜单中的某个项目上时,滑块会从当前标签滑动到突出显示的标签。当用户取消突出显示它时,它将返回与用户所在页面相关的选项卡。任何帮助将不胜感激

2 个答案:

答案 0 :(得分:1)

我打算为你提供一个jsfiddle示例,但不需要重新发明轮子。

jQuery MagicLine: Article& Demo

如果这不是您想要进入的方向,那么我建议您使用jQuery UI,特别是标签部分:here。确保将jQueryUI与Themeroller一起使用,这允许用户自定义。

希望这有帮助,如果您有任何问题,请告诉我们!

答案 1 :(得分:0)

我不会向您提供完整的代码,但我会指出您正确的方向,并搜索一些关键字。 您需要的是为将在菜单项下滑动的栏创建一个。 封装div中的每个菜单项,并为每个菜单项实现onMouseOver事件。 然后在onMouseOver事件中,您需要将div从其当前位置移动到此菜单div下,即将滑块div的offsetLeft更改为菜单div的offsetLeft值(如果使用jquery,它提供了方便的函数来获取此值)。 现在改变div的位置将直接将其移动到那里。如果你想在“幻灯片”动画中完成它,那么你需要逐步移动它,让我们说每次增加5像素。为此使用setTimeOut函数。创建一个函数,以5 px为增量更改slider div的offsetLeft值,并反复调用此函数,直到它通过setTimeout函数到达目标。 setTimeout基本上是一个计时器,它会在指定的时间后调用一个函数。

这应该足以让你在google上搜索:)