2

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

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

  • 我希望当前页面/部分具有 width:100% 以便它可以响应并且不显示其他部分的内容。
  • 加载新页面时，加载 gif 效果很好（可选）
  • 最后，这就是我认为 ajax 的用武之地；如果我在一个页面上，说联系，然后我点击主页，从联系到主页只有一页幻灯片，而不是中间的每一页。

我不希望任何人真正为我分解这些网站，但我希望能朝着正确的方向前进。也许我可以使用一些 jQuery 插件或基本概念。我已经搜索过这个网站，但只能找到简单的 jQuery 幻灯片效果。

谢谢你所有的时间。干杯

4

2 回答 2

1

Here are some options.

This tutorial: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

The jQuery scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/

The Supersized plugin: http://buildinternet.com/project/supersized/

Or maybe this tutorial: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

Just use Google, there are thousands and thousands of pages with examples and plugins.

于 2012-10-12T19:49:23.770 回答
1

在这里你使用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 毫秒的时间长度。然后，使用 done 函数清除计时器。这样，它仅在页面加载时间超过 200 毫秒时才显示加载器。如果您可以在钟形曲线上绘制加载时间，这将非常有用。通常，页面的加载时间将位于倒置的钟形曲线上，它要么在 0 和 X 之间，要么在 Y 和无穷大之间。如果您可以绘制 Y，则可以将加载程序设置为从 Y 开始，这样它就不会只显示一秒钟然后被切断。

于 2012-10-12T20:00:27.273 回答