0

晚安，早上，下午……

我正在开发一个网站，整个内容上下滑动......我想了很多可能性，但仍然找不到答案。请注意，索引/介绍/主页是第二部分。我的灵感是：

http://www.pulpdesign.it/

提前致谢。

<section class="tips-content">
        </section>

        <section id="intro">
            <h1 id="intro-logo">bla</h1>
                <span id="title">blabla</span>
                <nav id="navigation">
                    <a href="#" id="go_curriculum"><span class="curriculum"></span><span id="curriculum">currículo</span></a>
                    <a href="#" id="go_contact"><span id="contact">agendamento</span><span class="contact"></span></a>
                    <a href="#" id="go_services"><span id="services">serviços</span><span class="services"></span></a>
                    <a href="#" id="go_tips"><span id="tips">dicas</span><span class="tips"></span></a>
                </nav>
        </section>

        <section id="curriculum-content">
            <div style="height:100%; background:red;">
            </div>
        </section>

        <script>
            $(document).ready(function(){


                $("#go_curriculum").click(function(){
                    $(".tips-content").slideDown("slow");
                });

                $("#go_tips").click(function(){

                    $("#curriculum-content").slideUp("slow");


                });

            });
        </script>
</body>

4

3 回答 3

1

我是编写该网站的开发人员 :) 首先，感谢您以此为灵感！然后，要回答您的问题，正如 CP510 所说，您需要一个通用包装器

overflow:hidden; height: 100%; width: 100%

我使用了body标签，这实际上不是最好的选择，最好使用a

在那个容器内，你将拥有你的所有部分

position: absolute;
width: 100%;
height: 100%;

因为你必须为

scrollLeft/scrollTop

带有 jQ​​uery 的容器的属性，并使用 body 作为主要容器，我不得不处理一些 safari 的错误。另一个技巧是将您的部分视为打开的立方体的侧面。所以你的主要部分不会在

top: 0; left: 0

但在

top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;

其他部分依此类推。我希望我说得很清楚，我的英语不太好。如果您有任何其他问题，请提出！

于 2013-08-14T11:14:45.117 回答
0

看看这个示例只是为了了解这个逻辑如何工作的基本思想。

这个例子有 3x2 整页 div（总共 6 页），我们根本没有使用任何 JavaScript，它都是 CSS 和 HTML。

请注意，为了从页面中删除滚动条，您需要在正文样式中取消注释以下内容

body {
    white-space: nowrap;
    /*overflow:hidden;   UNCOMMENT THIS*/
}

jQuery 用于平滑动画

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

您也可以查看此网站，因为它与您想要实现的目标非常相似

于 2013-08-12T01:54:17.070 回答
0

这是一个棘手的问题。但我已经做到了。基本思想是使用原始$().animate()函数来移动所有这些有趣的东西。由于向上/向下滑动只是为此的辅助功能。

下一个要求是这些部分绝对位于包装器中。这有点不稳定，但这是伪布局

<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
   <DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
       <CONTENT DIVS POSITIONED CORRECTLY>
   </DIV>
<DIV>

现在您要做的是移动绝对定位的内容容器（第二个 div）以使用 jquery 显示该部分。

$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);

现在 POSITION_TOP 和 POSITION_LEFT 占位符可以是一个变量，根据点击的导航按钮进行设置。如果您希望在文档到达该位置时发生某些事情，则 cleanup_callback 是一个可选函数。

这就是 jQuery 的方式。有一种使用类和转换的 CSS 方式。它通过更改容器类来基本上声明目标页面的位置，然后因为 CSS 转换打开，所以移动是动画的。这些“导航类”中的每一个基本上只规定顶部和左侧位置属性。

于 2013-08-12T01:56:24.517 回答