左右滚动水平布局:jQuery/CSS测验 [英] Horizontal scrolling layout LEFT/RIGHT: jQuery/CSS quiz
问题描述
看来，我要实现的目标几乎是不可能的.
It seems, that what I am trying to achieve is almost impossible.
我正在尝试创建一个基于jQuery的水平布局，但是即使关闭了Java脚本也可以使用.我还希望尽可能保留其语义值的最干净的代码.所以我想我正在寻找最终的解决方案. :)
I am trying to create a horizontal layout dependant on jQuery, but usable even with Javascript being turned off. I also want the cleanest code possible with its semantic value kept. So I guess I'm looking to the ultimate solution. :)
网络上最常见的水平布局是: http://www .queness.com/resources/html/scroll/horizontal.html -这将是完美的(即使关闭JS也可以使用).我的问题是我需要使它双向运行"(左右中间带有开始"项).
The most common horizontal layout on the web is this: http://www.queness.com/resources/html/scroll/horizontal.html - This would be perfect (it works even with JS being turned off). My problem is I need to make it work "both ways" (left and right with "starting" item in the middle).
效果应类似于以下内容: http://steveandjacqs.com/网站(和编码后端) )很好，但是如果没有JS则无法使用，并且代码中充斥着各种hacks.
The effect should be similar as this: http://steveandjacqs.com/ The website (and the coding backend) is great, but it is unusable without JS and the code is full of hacks.
我的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本身应可滚动.
My JAVASCRIPT will use some sort of smooth animation plugin (scrollTo maybe?) between the sections. Browser scrolling (at least vertical) should be disabled, the DIVs itselves should be scrollable.
///
我应该发布我的网站的屏幕截图还是这种方式?
Should I post screenshot of my website or is it understanble this way?
提前谢谢！
PS:我或多或少是jQuery copypasta，所以请对我轻松一点. :)
PS: I am more or less jQuery copypasta, so go easy on me please. :)
如何修改.htaccess以便在进入首页时添加内部链接:将"http://example.com"重写为"http://example.com#home"?比起我可以对布局通用方式"进行编码(例如在Queness的上一个示例中).
What about modifying .htaccess to add internal link on entering the homepage: to rewrite "http://example.com" to "http://example.com#home"? Than I can code the layout "the common way" (such as in previous example from Queness).
推荐答案
您需要遵循示例站点的使用方式.
You would need to follow the way the example site uses.
您当前设置中的问题是
- 该菜单不在home元素内，因此不会滚动..
- 每个"页面"的页面的尺寸/位置错误
- The menu is not inside the home element, so it does not scroll with it..
- You have wrong dimensions/positions for each "page"
要在启动时自动滚动到#item-home，可以使用
To auto-scroll to the #item-home on start, you could use
<meta http-equiv="refresh" content="0;URL='#item-home'">
在页面的<head>部分
包含以下更正/添加项的演示，位于 http://jsfiddle.net/gaby/QsQDK/1/
Demo including these corrections/additions at http://jsfiddle.net/gaby/QsQDK/1/
这篇关于左右滚动水平布局:jQuery/CSS测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
