将 jQuery 和 CSS3 滚动效果从功能垂直滚动转换为所需水平滚动的问题



我一直在玩散步.js今天(http://lab.hakim.se/scroll-effects/)我是jQuery的新手,但我正在尝试学习语言以改进我的网页设计。我在这个问题上付出了很多努力,以确保我没有错过任何我还不知道的东西。任何帮助将不胜感激!

stroll.js 是为垂直滚动 http://jsfiddle.net/WtCj8/7/而构建的(请参阅此示例)
我的目标是转换jQuery,以便插件适用于水平滚动。这将提供许多新的设计选择和新的自由。

我已采取以下步骤来实现此目的:
在水平滚动中,页面的"顶部"是左侧,底部是右侧。高度并不重要,但宽度很重要。

offsetHeight > offsetWidth
offsetTop    > offsetLeft
offsetBottom > offsetRight

我已经转换了HTML/CSS,因此对象被定位为水平列表。我已经根据我的理论调整了jQuery,使其正常工作。(我关闭了我的工作示例(第一个jsfiddle链接))

我的更改导致了以下jsFiddle。 http://jsfiddle.net/WtCj8/8/小提琴不像我的第一个例子那样起作用。jQuery不像我的第一个例子那样命名过去/未来的单元格。我的问题是为什么它不起作用,我该如何解决它/我必须在哪个方向寻找解决方案?

这个问题最重要的规则是: 164 -242 在 jsFiddle 中,这些是我为达到预期效果而更改的规则。

感谢一百万的任何帮助!我非常感谢。

我对 js 第 291 行做了一个简单的修改 http://jsfiddle.net/WtCj8/10/

function updateHeight() {
    list.style.width = window.innerWidth + 'px';
    stroll.bind('ul');
}

还有 css 上的一些曲调(为 UL 设置自动换行和宽度自动)

最新更新