左右滚动水平布局:jQuery/CSS测验

本文介绍了左右滚动水平布局:jQuery/CSS测验的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

看来，我要实现的目标几乎是不可能的.

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).

CSS测验

左右滚动水平布局:jQuery/CSS测验

问题描述

推荐答案