4

我正在创建一个网页，设计师希望通过水平滚动（从左到右）来完成所有导航。我已经对水平布局进行了编码。但是，他希望能够启动水平布局以加载列表中的一个中间 div，从而使用户能够向任一方向滚动。一个例子是，如果我有一个水平 5 个 div 的列表（1、2、3、4、5），并且我希望页面从 div 3 开始，从而允许用户从左到右滚动以到达 div 2 或其他方式到达 div 4。目前默认从 div 1（左）开始，这意味着用户最初只能滚动一种方式。

这是布局： 在此处输入图像描述 点击这里查看大图

我也搜索了该网站，但答案是使用锚/名称标签技术，但我想直接在中间部分页面上加载页面。

以下是类似的问题：

附带说明一下，我目前正在学习 jQuery 和 Javascript，但还处于早期阶段 - 仍在通过 codeacademy 拖网，还没有进入任何真实世界的代码。所以目前我正在使用插件作为一种学习方式，但希望在几个月内我可以构建自己的东西！

我只是想知道如何实现这一点。

如果您可以拥有一些简单的 javascript/jQuery 代码（jsfiddle），我们将不胜感激。

4

2 回答 2

3

好的，在搜索了 2 天后，我在“雅虎答案”中找到了答案，我忘记为链接添加书签，但这是我得到的代码。

    $(window).load(function(){

        $(document).ready(function(){
         scrollTo(($(document).width() - $(window).width()) / 2, 0);
    });
});
于 2012-09-26T04:54:49.897 回答
2

没有 JavaScript

只需为布局中的每个 div 创建一个 id，并将默认布局的 id 设置为默认锚点，这样当页面加载时，它立即进入该部分。
将上一页的链接设置为上一个布局id的锚点，类似于下一个布局id。因此，只要单击这些链接，它们的锚点就会显示它们，而其他链接则被隐藏。
这种方法的缺点是你不会看到滚动效果，因为这需要 JavaScript；但是，它应该按预期工作。

使用 JavaScript

如前所述，只需为布局中的每个 div 创建一个 id。创建 3 个 JavaScript 变量，一个用于当前、上一个和下一个布局 ID。并将默认单元格的 id 设置为该变量。或者 您可以创建一个 JavaScript 对象，该对象将包含 3 个属性：当前布局 ID、上一个布局 ID 和下一个布局 ID。使用window.onload或 jquery 的$(document).ready()
函数 将 JavaScript 函数附加到页面加载过程。使用 jQuery 中的animate函数，将当前布局 id 传递给它。这将简单地将页面滚动到传递的 id 以及滚动效果。 您应该立即实现目标。

于 2012-09-22T15:13:57.793 回答