Question

我正在尝试重现这种效果，但我不熟悉javascript来自行解构这些网站。以下是我正在寻找效果的网站（仅限导航）：

http://www.serialcut.com/
http://www.ultranoir.com/
http://kikk.be/
http://www.marcusthomasllc.com/

我希望当前页面/部分的宽度为100％，因此它可以响应而不显示其他部分的内容。
加载新页面时，加载gif是个不错的选择（可选）
最后，这是我认为ajax进来的地方;如果我在一个页面上，说联系，我点击 home ，只有一页从联系到 home 而不是介于两者之间的每一页。

我不希望任何人真的为我打破这些网站，但我希望能朝着正确的方向努力。也许我可以使用一些jQuery插件或基本概念。我搜索过这个网站，但只能找到简单的jQuery slidein效果。

感谢您的所有时间。欢呼声

Answer 1

以下是一些选项。

本教程：http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

jQuery scrollTo插件：http://demos.flesler.com/jquery/scrollTo/

Supersized插件：http://buildinternet.com/project/supersized/

或者也许是本教程：http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

只需使用Google ，就会有成千上万个包含示例和插件的网页。

Answer 2

这里使用jQuery：

    var slideAjax = function(elementid, url, data){
        $('#'+elementid).hide(); //make sure the div we are loading into is hidden
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
        }).done(function(data)){
            $('#'+elementid).html(data).show('slide',{direction: 'right'}, 200); //slide in
        });
    }

如果你不介意复杂性，你可以创建一个setTimeout来推送加载器html，时间长度为200毫秒。然后，使用完成功能清除计时器。这样，它只显示页面加载时间超过200毫秒时的加载程序。如果您可以在钟形曲线上绘制加载时间，这将非常有用。通常，页面的加载时间将位于倒置的钟形曲线上，其中它将介于0和X之间，或Y和无穷大之间。如果您可以绘制出Y，则可以将加载程序设置为从Y开始，这样它就不会只显示一秒钟并切出。

网站解构：Ajax加载页面然后滑入

2 个答案: