根据屏幕上的位置设置指向<li>的箭头</li>

时间:2013-08-08 03:30:29

标签: javascript jquery html css twitter-bootstrap

我对html,css和javascript不太熟悉

我正在使用twitter bootstrap,我想在长页面中有一个部分指示器,显示当前视图相对于整个ver长滚动页面的相对位置。

我想要实现的样本是: http://global.tommy.com/int/en/Collections/start

我设法用<ul> <li>做到了这一点,但是,当用户向上和向下滚动时,我还想将箭头移动设置为从<li>到下一个<li>的动画这页纸。我设法找出<ul> <li>的代码,但不知道如何动画动画......任何人都可以帮助我指向特定的动画部分或推荐一些javascript或css库吗?可能我也错过了twitter-bootstrap元素,但到目前为止我还没有找到...谢谢!

编辑:

我在jsfiddler中的代码,然而,它似乎不适用于jsfiddler:

The ul li code

我想要实现的就像Tommy Hilfiger页面左侧的动画一样,当您向上和向下滚动时,箭头将通过调整箭头指向特定部分的位置来跟踪您所在的部分。李

2 个答案:

答案 0 :(得分:1)

没有更多细节我不能真正详细说明,但我至少可以建议jQuery's animate function。它使动画css属性变得非常容易。

答案 1 :(得分:1)

要为页面滚动设置动画,请查看此库:

https://github.com/davist11/jQuery-One-Page-Nav.git

您也可以使用相同的js为箭头的移动设置动画