两个单独的html文件之间的平滑幻灯片过渡

Question

是否有可能在两个单独的html文件之间进行平滑的幻灯片过渡？ 例如。 在一个HTML上是

<a href="secondHtml.html">Link</a>

在单击此链接页面后没有重新加载，只是滑动到第二个文件？

Answer 1

您必须通过ajax将第二个HTML文件加载到iFrame或DIV中，然后将其滑动到视图中。 您可以使用jQuery并轻松访问动画。

您可能还想更新页面的URL，为此，您可以使用location.hash来执行此操作，而无需重新加载页面。 您还可以检查jquery的observehashchange plugin ，以在用户更改URL时检查哈希更改。

您可以在此处查看示例。

要让Google访问页面，您可以在网站上添加sitemap.xml来描述页面，还可能需要设置网站管理员工具才能向Google提供有关您网站的有用信息。 您可以在此处添加链接，Google会获取。 我有一个页面，其中Google可以看到5000多个链接，但是默认情况下它们不在任何页面上。

但是，如果要在页面上具有普通的<a>链接，则可以使用简单的jQuery触发动画，而不用转到该链接。

<a href="/page2">Go to page 2</a>
<a href="/page3">Go to page 3</a>
<a href="/page4">Go to page 4</a>
<script>
    function LoadPage(page) {
        //Put your page loader script here        
    }

    $(document).ready(function(){
        $(a).click(function(event){
            event.preventDefault();
            var page = $(this).attr('href').substr(1);
            LoadPage(page);
        });
    });
</script>