如何解决滑动网页过渡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缓动的方式滑动页面。由于SEO的原因,我不想建立一个网页。我不确定ajax是否是答案,但从未尝试过,因此没有使用它的经验。
谢谢,
杰米
解决方法
您可以使用jquery的全景插件:
插件1
插件2
插件3
您还可以检查:
这篇关于SO的帖子
, 我不明白为什么无法将所有内容一起加载并按需隐藏/显示它们。
如果搜索引擎机器人忽略不可见的内容,请考虑使用SEO。我认为用Javascript加载新页面不会使它变得更好,我不确定,如果我错了,请纠正我。
为了使动画流畅,我认为您必须预先加载内容。无论您如何优化页面,都仍然需要花费一些时间来加载它们,它肯定比动画持续时间更长,而且还取决于用户的网络/设备/位置...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。