3

虽然这个网站上有类似的问题,但似乎没有完全回答我的问题......

我有一个 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 缓动的方式滑动页面。出于 SEO 的原因,我不想拥有一个单页网站。我不确定ajax是否是答案,但从未探索过它,所以没有使用它的经验。

谢谢,

杰米

4

2 回答 2

0

我不明白为什么不能将所有内容加载在一起并按需隐藏/显示它们。

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

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

于 2015-02-12T12:02:47.100 回答
0

您可以使用 jquery 的全景视图插件: 插件 1 插件 2 插件 3 您还可以查看: SO 上的这篇文章

于 2011-05-29T09:51:52.210 回答