滑动网页转换（jQuery的）

虽然有在这个网站类似的问题，不似乎相当回答我的问题...滑动网页转换（jQuery的）

我有一个5静态页面的网站，它看起来像一个发廊内。我希望每个页面过渡看起来像用户滑过（环顾四周）沙龙。这意味着内容（.content div）需要滑出，然后下一页滑入。如果可能的话，最好能够向链接添加不同的类，从而改变页面和新页面以何种方式滑出/放入（即从右到左或从左到右）。应该注意的是，导航栏，徽标和页脚不会滑动，因为它们位于每个页面的相同位置。

我设法让与jQuery的淡入淡出效果：

$(".content").css("display", "none"); 
$(".content").fadeIn(2000); 
$("a.transition").click(function(event) { 
    event.preventDefault(); 
    linkLocation = this.href; 
    $(".content").fadeOut(1000, redirectPage); 
}); 
function redirectPage() { 
    window.location = linkLocation; 
}

然而，这在现实中是很笨重，而且我想能够滑入类似jQuery的宽松的方式页面。我不希望有一个单页网站的搜索引擎优化的原因。我不确定ajax是否是答案，但从来没有探索过，所以没有使用它的经验。

感谢，

杰米

来源

2011-05-29 Jamie

“缓动”不是过渡类型。它定义了一个动画参数如何在整个动画期间发生变化。有不同类型的缓动，导致看起来不同的动画。尽管如此，它并没有为任何“本身”创作任何动画。如果您不想将所有子页面包含到一个页面中，则必须使用AJAX来获取每个子页面的内容，或者为每个页面加载添加一个“滑入”效果，并用“滑出”每一页都卸载。我的建议是让你的网站保持原样，并使用JS来改变行为（如果可用），使用AJAX加载子页面。 – polarblau 2011-05-29 08:54:41

您可以使用jQuery的全景插件： Plugin 1 Plugin 2 Plugin 3 而且你还可以检查： This post on SO

来源

2011-05-29 09:51:52

我喜欢这个插件，但是当点击一个链接时，问题就出现在html页面之间;并且页面的那些部分与页面的中心对齐。 – Jamie 2011-05-29 10:21:43

我不明白为什么无法将所有内容加载到一起，并根据需要隐藏/显示它们。

考虑搜索引擎优化，如果搜索引擎机器人忽略不可见的内容。我不认为使用Javascript加载新页面会使它更好，我不确定，请纠正我，如果我错了。

为了使动画平滑，我认为你必须预加载内容。无论你如何优化你的页面，加载它们仍然需要时间，它肯定比你的动画持续时间还要长，并且还取决于用户的网络/设备/位置......

来源

2015-02-12 12:02:47 cn123h

滑动网页转换（jQuery的）

回答

相关问题