3

看来，我想要达到的目标几乎是不可能的。

我正在尝试创建一个依赖于 jQuery 的水平布局，但即使关闭了 Javascript 也可以使用。我还希望保留其语义值的最干净的代码。所以我想我正在寻找最终的解决方案。:)

网络上最常见的水平布局是这样的：http ://www.queness.com/resources/html/scroll/horizo​​ntal.html - 这将是完美的（即使关闭 JS 也可以使用）。我的问题是我需要让它“双向”工作（左右中间有“开始”项目）。

效果应该是这样的：http ://steveandjacqs.com/网站（和编码后端）很棒，但是没有 JS 就无法使用，而且代码充满了 hack。

我的 CSS：

html,body { overflow: hidden; }
.wrapper { position: relative; width: 100%; height: 100%; } 
.wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; }
#item-left { position: absolute: top: 0px; left: 0%; }
#item-home { position: absolute; top: 0px; left: 200%; }
#item-right{ position: absolute; top: 0px; left: 400%; }
#item-down { position: absolute; top: 200%; left: 0%; }

我的 HTML：

<body>
<nav><ul>
     <li><a href="#item-left">Left</a></li>
     <li><a href="#item-home">Home</a></li>
     <li><a href="#item-right">Right</a></li>
     <li><a href="#item-down">Down</a></li>
</ul></nav>
<div class="wrapper">
     <div class="wrapper-cont">
           <div id="item-left">Element outside viewport on the left side</div>
           <div id="item-home">Element on the center of viewport</div>
           <div id="item-right">Element outside viewport on the right side</div>
           <div id="item-down">Element on the center of viewport but down</div>
     </div>
</div>
</body>

我的 JAVASCRIPT 将在部分之间使用某种平滑动画插件（scrollTo 也许？）。浏览器滚动（至少垂直）应该被禁用，DIV 本身应该是可滚动的。

///

我应该发布我的网站的屏幕截图还是这样可以理解？

先感谢您！

PS：我或多或少是 jQuery copypasta，所以请放轻松。:)

更新

修改.htaccess，在进入首页时增加内链：将“http://example.com”改写为“http://example.com#home”？比我可以用“常用方式”编写布局（例如 Queness 的前一个例子）。

4

1 回答 1

1

您需要遵循示例站点使用的方式。

您当前设置中的问题是

  • 菜单不在 home 元素内，所以它不会随它滚动。
  • 每个“页面”的尺寸/位置错误

要自动滚动到#item-home开始，您可以使用

<meta http-equiv="refresh" content="0;URL='#item-home'">

在<head>您页面的部分

演示包括这些更正/添加在http://jsfiddle.net/gaby/QsQDK/1/

于 2012-12-03T13:37:43.193 回答