php - 尝试根据我发现的 Flash 元素设计 HTML5 页面

Question

我正在尝试实现我在另一个站点上找到的设计。它是用 Flash 设计的，但我正在尝试使用 HTML5、CSS 和 Javascript(或 PHP，如有必要)复制类似的东西。

请参阅以下站点。 http://www.raytheon.com/newsroom/technology/

我正在尝试复制窗帘类型的设计，但我才刚刚开始。我最初的问题是，我将如何着手让按钮与内容本身并排？我现在不担心滑动过渡，我只是想知道应该如何布局。

Answer 1

我会这样做:

<div class="pagecontainer">
  <div id="page1" class="page"  style="background: url(picture20px*400px);"/> 
  <div id="page2" class="activepage"  style="background: url(picture20px*400px);"/> 
  <div id="page3" class="page"  style="background: url(picture20px*400px);"/> 
</div>

CSS:

 .pagecontainer {
  position:relative;
  width:440px;
  height:400px;
  overflow:hidden;
 }
 .activepage {
  float:left;
  width:400px;
  height:400px;
  overflow:hidden;
  padding-left:20px;

 }
.page {
  float:left;
  width:20px;
  height:400px;
  overflow:hidden;
  padding-left:20px;
}

更新:实际上，我认为(在阅读其他答案的更新之后) float 更好，因为使用 float 动画会更容易。我仍然会在页面上使用 overflow:hidden 。要使页面可见，请设置其宽度动画，以便事件页面的宽度为 400 像素。所有页面都有 400px 的内容，但应该只有 20px 是可见的。