代码之家  ›  专栏  ›  技术社区  ›  torm

两个单独的html文件之间的平滑幻灯片转换

  •  0
  • torm  · 技术社区  · 9 年前

    有没有可能在两个不同的html文件之间进行平滑的幻灯片转换? 例如。 在一个html上

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

    在点击这个链接页面后,并没有重新加载,只是滑动到第二个文件?

    1 回复  |  直到 9 年前
        1
  •  3
  •   Fenistil    9 年前

    您必须通过ajax将第二个HTML文件加载到iFrame或DIV中,然后将其滑动到视图中。您可以使用jQuery来实现这一点,并方便地访问动画。

    您可能还想更新页面的URL,以便使用 location.hash 在不重新加载页面的情况下执行此操作。您还可以检查 observehashchange plugin 以在用户更改URL时检查哈希更改。

    您可以查看示例 here .

    要让Google访问这些页面,您可以添加 sitemap.xml 到您的网站描述页面,您可能还需要设置 webmaster tools 向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>