使某些元素在視口中可見

Question

我有特定的導航任務來完成使用css/js，現在我試圖找出最好的方法來做到這一點。

它是這樣的（見圖片）：

正如你可以看到有卡顯示信息（紅，綠）。有箭頭向左或向右移動卡片。 所以我想弄明白如下：

1）根據人的瀏覽器/屏幕大小，我需要決定顯示多少紅卡（2-4最大）。有沒有人有任何建議如何做到這一點？

2）我需要將其餘的卡片隱藏到右側（幾乎看不見）或他們在左側。我將如何最好地安排元素（div）？

Answer 1

您需要知道頁面的寬度以及在邊緣想要的元素的寬度。 使用JavaScript，你可以動態地對齊這些項目。

• 左側項目左對齊：0 - 項目寬度+偏移量。
• 正確的項目將被右對齊：0 +項目寬度 - 偏移量。

偏移量是您希望顯示多少元素。

這可以結合jQuery .animate()方法來創建滑動效果的元素懸停和點擊。

下面是幾年前我做過類似效果的一個例子：http://www.scottycameron.com/tour/victories.aspx（點擊箭頭，日期和項目）。