2014-02-25 36 views
0

我有一個不同項目寬度的水平菜單,我想要像一個可拖動的輪播菜單(您每天都在iPhone和Android屏幕上拖動這種拖動)。 我發現很多jQuery插件像OWL Carousel這樣做。但是,所有這些插件都需要所有項目的固定寬度,並指定每個視口要顯示的項目數。不同項目大小的可拖動輪播菜單

考慮像Home, Administration, Stock, Reports, Personalization這樣的菜單,項目寬度不一樣。我不知道屏幕寬度,所以我無法確定每個視口可顯示多少項目。這對於大多數傳送帶卷軸都是必需的。

請考慮下圖。外框是容器div。標有1〜6的項目是簡單鏈接(標籤)的菜單項目。項目1〜3可見(4部分可見),項目5和6隱藏。

+---------------------------+ 
| +----+ +---------+ +---+ +----+ +------+ +---------+ 
| | 11 | | 2222222 | | 3 | | 44 | | 5555 | | 6666666 | 
| +----+ +---------+ +---+ +----+ +------+ +---------+ 
+---------------------------+ 

拖過容器將所有項目向左或向右移動。拖動停止後,最近的菜單項應該捕捉到容器的左邊界(帶有動畫)。項目的左邊界是忽略負號的測量點。同樣,如果所有物品都放在容器中,則不可拖拽,而最後一個物品只能對準菜單的右邊框,不允許拖拽。點擊沒有拖動的項目應該導航。 如果視口中的最後一個項目部分可見,這並不重要。

問題

我做了菜單,我可以將它拖到左右。我無法將最接近的項目貼合到容器的左邊框。我可以在Javascript和jQuery中做到這一點,但我的解決方案變得非常複雜,我自己也迷失了方向。

問題

是否有任何現有的jQuery插件能夠做到這一點? 如果不是,我如何創建動畫來捕捉物品?

+0

ü可以使一個小提琴 –

回答

相關問題