2012-09-19 29 views
2

我有一个长期的目标,我正在慢慢磨合我的方向,但我需要很多帮助,不知道我在做什么?通过旋转DIV来控制列表的位置

请看看这个小提琴:http://jsfiddle.net/bloodygeese/vjU5b/27/

我的最终目标是让红方控制列表的当方旋转到正确的位置, (顺时针列表中向下移动到在蓝框区域内显示一行新的文本,然后当到达列表的末尾时,移动将反转,正方形将向左旋转(逆时针),列表将向上滑动以显示蓝色内的文本行盒子, 我真的很喜欢能够学习的是如何在红色方块周围使用鼠标拖动以旋转方块并上下滑动列表并将其锁定到位置,以便文本位于蓝色框内。

目前我无法获得列表继续移动,因为方块旋转,它只是一次,从那里开始,我不知道如何让它反转或如何使用鼠标拖动来控制它。

任何指针/帮助将不胜感激。

回答

2

为了让单继续移动,你需要这样的:

$('#list').animate({top : "+=20px"}, {duration:500}) 

,而不是

$('#list').animate({top : "=120px"}, {duration:500}) 

第二条语句将只定位其顶部:120像素,而第一个将递减每次点击20px的位置

为了改变方向,你可以这样做jsfiddle

+0

谢谢,如何得到它扭转一旦达到一定程度或高度的任何想法? – user1681836

+0

@ user1681836我在我的答案中添加了解决方案 –

+0

这真是太神奇了,谢谢,现在如果你能告诉我如何让鼠标拖动时发生同样的动作,我会送你我的房子和我的第一个出生 – user1681836

1

你应该每次更改列表的顶端,像这样:

var top = 120; 

$(function(){ 
$('#box').click(function(){ 
    $('#list').animate({top : top + "px"}, {duration:500}); 
    top = top + 20;   
}) 
0

检查它如何能够实现这个小exmple。我没有写完整的代码..

FIDDLE