使某些元素在视口中可见

Question

我有完成使用css / js的特定导航任务，现在我试图找出最佳方法。

就像这样（见图）：

如您所见，有卡片显示信息（红色和绿色）。有箭头可以向左或向右移动卡片。 所以我想弄清楚的是：

1）根据人物浏览器/屏幕尺寸，我需要决定要显示多少张红牌（最多2-4张）。有没有人对如何做到这一点有任何建议？

2）我需要将其余的卡片隐藏在右侧（几乎不可见）或者它们位于左侧。我怎样才能最好地安排元素（div）？

Answer 1

您需要知道页面的宽度以及边缘所需元素的宽度。 使用javascript，您可以动态调整这些项目。

• 左侧项目将左对齐：0 - 项目宽度+偏移量。
• 正确的项目将对齐：0 +项目宽度 - 偏移。

偏移量是您希望看到多少元素。

这可以与jQuery A = matrix(0,nrow=5,ncol=5) A[2,2]=1 for (i in 1:5){ for (j in 1:5){ if ((A[i,j]==1)) { A[,(j+1)]=1 A[,(j-1)]=1 A[(i+1),]=1 A[(i-1),]=1 A[(i+1),(j+1)]=1 A[(i+1),(j-1)]=1 A[(i-1),(j+1)]=1 A[(i-1),(j-1)]=1 } } } 方法结合使用，以便在悬停和点击上的元素上创建滑动效果。

以下是我几年前做过的类似效果的示例：http://www.scottycameron.com/tour/victories.aspx（点击箭头，日期和项目）。