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

Question

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

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

点击这个link页面后没有重新加载，只是滑动到第二个文件？

Answer 1

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

您可能还想更新页面的 URL，因为您可以使用 location.hash 来更新页面而无需重新加载页面。当用户更改 URL.

时，您还可以检查 jquery 的 observehashchange plugin 以检查散列更改

您可以查看示例 here。

要 Google 访问这些页面，您可以添加 sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools 以向 Google 提供有关您站点的有用信息。在这里你可以添加 links 并且 Google 会得到它。我有一个页面，Google 看到了超过 5000 个 link，但默认情况下它们不在任何页面上。

但是如果你想在你的页面上有正常的 <a> links，你可以使用一个简单的 jQuery 来触发动画而不是去 link ].

<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>

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

Smooth slide transition between two separate html files

html

javascript

ajax

jquery

slide