1

我很想知道用什么来产生这样的效果，比如这个网站模板：http ://www.templatemonster.com/demo/43491.html

我希望有一个菜单和背景，而一旦我单击菜单链接，它就会触发新页面滑入视图，而不会被重定向到新页面，从而导致浏览器重新加载新页面等。一些流畅而漂亮的东西。

我不是在寻找代码（除了要使用的函数（如果是 JQuery）），我应该寻找什么效果来使这成为可能？

只需指出我正确的方向:)

4

2 回答 2

0

有很多方法可以实现您的愿望，但这是我关于如何从概念上实现它的建议：

  1. 通过为内容容器设置动画来为内容设置动画position，这应该会给您的页面带来流畅的感觉。jQuery 文档应该对此非常清楚。请记住，您要拦截锚点的正常行为，所以要么 要么 要么preventDefault()两者return false兼而有之。

  2. 使用AJAX 请求获取您的内容。您可以使用href放在链接中的属性来获取正确的内容。然后使用方法将事件绑定到该<a>元素.on()。你离开的原因href是有一个优雅的后备：如果代码出现问题，如果用户禁用了 javascript，或者只是在非 javascript 友好的浏览器上导航，他仍然可以访问你的内容。

这是实现您所寻找的两个基本步骤。如果您想进一步微调您的网站，请尝试考虑这些事情：

  1. 通过谨慎使用 loading让您的网站看起来更具响应.gif性。

  2. 不重复服务内容：检查用户是否点击了当前显示页面的链接，不再获取内容；除了对您的用户来说看起来很愚蠢之外，它还会造成无用的服务器负载（可能微不足道，但仍然如此）。不过，请始终考虑您的用户！告诉他，巧妙地使用 UI 禁用了该链接。

  3. 操纵浏览器历史记录：使用history API。您的网站将更易于访问、对用户更友好、对 SEO 更友好，并且看起来也更加先进。

于 2013-03-11T00:52:46.283 回答
-1

现在可以有很多方法..简单的方法（但这不是一种可维护的方法）

是将您的所有网站内容放在一个页面中，并将您认为页面的每个部分包装在一个 div 中，如下所示

<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us  page goes here </div>

etc...

并使用 jquery 隐藏除主页之外的所有内容

$(function(){
   $('.contact-us-page').hide();
   $('.other-page').hide();
})

当用户点击其他页面的链接让我们说联系我们页面时，您将隐藏父级并滑动联系我们页面

$('.contact-us-link').click(function(){
    $('.home-page').hide(1000);
    $('.contact-us-page').show(1000);
})

就是这样:)

这样做的缺点是不会有路由..

所以要解决这个问题，你必须使用像backbone.js这样的东西，这需要一段时间才能很好地了解它......

这只是一个关于它如何工作的快速想法..

于 2013-03-11T00:23:46.237 回答