在两个单独的html文件之间进行平滑的幻灯片过渡 [英] Smooth slide transition between two separate html files

问题描述

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

is there any possibility to make smooth slide transition between two seperate html files? Like for example. On one html is

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

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

and after clicking this link page is not reloading, just sliding to the second file?

推荐答案

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

You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.

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

You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.

您可以在此处查看示例.

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

To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.

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

But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the 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文件之间进行平滑的幻灯片过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！