通過旋轉DIV來控制列表的位置

我有一個長期的目標，我正在慢慢磨合我的方向，但我需要很多幫助，不知道我在做什麼？通過旋轉DIV來控制列表的位置

請看看這個小提琴：http://jsfiddle.net/bloodygeese/vjU5b/27/

我的最終目標是讓紅方控制列表的當方旋轉到正確的位置，（順時針列表中向下移動到在藍框區域內顯示一行新的文本，然後當到達列表的末尾時，移動將反轉，正方形將向左旋轉（逆時針），列表將向上滑動以顯示藍色內的文本行盒子，我真的很喜歡能夠學習的是如何在紅色方塊周圍使用鼠標拖動以旋轉方塊並上下滑動列表並將其鎖定到位置，以便文本位於藍色框內。

目前我無法獲得列表繼續移動，因爲方塊旋轉，它只是一次，從那裏開始，我不知道如何讓它反轉或如何使用鼠標拖動來控制它。

任何指針/幫助將不勝感激。

來源

2012-09-19 user1681836

爲了讓單繼續移動，你需要這樣的：

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

，而不是

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

第二條語句將只定位其頂部：120像素，而第一個將遞減每次點擊20px的位置

爲了改變方向，你可以這樣做jsfiddle

來源

2012-09-19 02:06:46

謝謝，如何得到它扭轉一旦達到一定程度或高度的任何想法？ – user1681836

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

這真是太神奇了，謝謝，現在如果你能告訴我如何讓鼠標拖動時發生同樣的動作，我會送你我的房子和我的第一個出生 – user1681836

你應該每次更改列表的頂端，像這樣：

var top = 120; 

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

來源

2012-09-19 02:06:55 Felix

檢查它如何能夠實現這個小exmple。我沒有寫完整的代碼..

FIDDLE

來源

2012-09-19 02:27:46

通過旋轉DIV來控制列表的位置

回答

相關問題