使某些元素在视口中可见

Question

我有特定的导航任务来完成使用css/js，现在我试图找出最好的方法来做到这一点。

它是这样的（见图片）：

正如你可以看到有卡显示信息（红，绿）。有箭头向左或向右移动卡片。 所以我想弄明白如下：

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

2）我需要将其余的卡片隐藏到右侧（几乎看不见）或他们在左侧。我将如何最好地安排元素（div）？

Answer 1

您需要知道页面的宽度以及在边缘想要的元素的宽度。 使用JavaScript，你可以动态地对齐这些项目。

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

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

这可以结合jQuery .animate()方法来创建滑动效果的元素悬停和点击。

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