使某些元素在视口中可见
making certain elements visible in a viewport
我有特定的导航任务要使用 css/js 来完成，现在我正在尝试找出执行此操作的最佳方法。
它是这样的（见图）：
如您所见，有卡片显示信息（红色和绿色）。有箭头可以向左或向右移动卡片。
所以我想弄清楚的是：
1) 根据人数 browser/screen 的大小，我需要决定显示多少张红牌（最多 2-4 张）。有人对如何做到这一点有任何建议吗？
2) 我需要将其余卡片隐藏在右侧（几乎不可见）或左侧。我如何最好地排列元素 (divs)？
您需要知道页面的宽度，以及您希望在边缘显示的元素的宽度。
使用 javascript 您可以动态对齐这些项目。
- 左侧项目将左对齐：0 - 项目宽度 + 偏移量。
- 正确的项目将右对齐：0 + 项目宽度 - 偏移量。
偏移量是您希望元素可见的程度。
这可以与 jQuery .animate() 方法相结合，在悬停和单击时在元素上创建滑动效果。
这是我几年前做过的类似效果的示例：http://www.scottycameron.com/tour/victories.aspx（单击箭头、日期和项目）。
我有特定的导航任务要使用 css/js 来完成，现在我正在尝试找出执行此操作的最佳方法。
它是这样的（见图）：
如您所见，有卡片显示信息（红色和绿色）。有箭头可以向左或向右移动卡片。 所以我想弄清楚的是：
1) 根据人数 browser/screen 的大小，我需要决定显示多少张红牌（最多 2-4 张）。有人对如何做到这一点有任何建议吗？
2) 我需要将其余卡片隐藏在右侧（几乎不可见）或左侧。我如何最好地排列元素 (divs)？
您需要知道页面的宽度，以及您希望在边缘显示的元素的宽度。 使用 javascript 您可以动态对齐这些项目。
- 左侧项目将左对齐：0 - 项目宽度 + 偏移量。
- 正确的项目将右对齐：0 + 项目宽度 - 偏移量。
偏移量是您希望元素可见的程度。
这可以与 jQuery .animate() 方法相结合，在悬停和单击时在元素上创建滑动效果。
这是我几年前做过的类似效果的示例：http://www.scottycameron.com/tour/victories.aspx（单击箭头、日期和项目）。