0

我搜索了 StackOverflow 帖子和各种论坛，但找不到答案。我已经找到了类似问题的答案，但没有什么能把它分解得足以让我理解。我了解很多 PHP 和 HTML，但在编写脚本时遇到了困难。

如何单击链接，获取href（或我需要什么？），让它淡出当前内容，找到我要加载的内容（href或链接中的任何内容）并加载它，然后淡入淡出？

我之前尝试过的随机代码问题：

  1. 如果在加载时单击另一个链接，则在从一页到另一页时，它只会部分淡入第二页。

  2. 每个链接都必须有自己的脚本才能将其定向到那里。永远无法弄清楚如何让它获得点击链接的href。

  3. 示例太复杂了，我无法将它们修改为我所需要的。我需要了解它的过程。

4

2 回答 2

0

就像是：

$('.link').on('click', function(){
   $('.content').fadeOut().load('/path/to/script', function() {
      $(this).fadeIn();
   });
});

使用可以返回所需内容的 HTML 页面或 PHP 脚本的关键。您可能希望从另一个元素中检索 URL 或将其硬编码到您的脚本中 - 您的调用。有关如何load()工作的更多信息，请访问 jQuery 的文档。

于 2013-01-17T21:51:04.653 回答
0

实际上，我前段时间开发了类似的东西。

诀窍（或技巧）是将您的页面包装为 an iframe，并在父窗口上具有一个 div 元素，该元素在请求页面时淡入视图，并在页面加载时淡出。

父窗口如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>&lt; Page1 &gt;</title>
        <style>
            html, body{
                font-family:helvetica;
            }
            #fade, iframe {
                position:absolute;
                left:0px;
                top:0px;
                width:100%;
                height:100%;
                border-width:0px;
                z-index:-1;

                opacity:0;

                color:#AAA;
                background-color:#FFF;

                -webkit-transition: opacity 300ms;
                -moz-transition: opacity 300ms;
                -o-transition: opacity 300ms;


            }
            iframe {

                opacity:1;

                z-index:1;
                background-color:#FFF;
            }
        </style>
    </head>
    <body>
        <div id="fade">
        <h1>Loadin..</h1>
        </div>
        <iframe src="p1.html"></iframe>

        <script>

            var fade    = document.getElementById("fade");
            var iframe  = document.getElementsByTagName("iframe")[0];


            var t = null;

            addEventListener("message", function(e) {

                if(t!=null)clearTimeout(t);

                fade.style.zIndex = "2";

                t=setTimeout(function(){
                    fade.style.opacity = "1";
                },0);

            }, true);


            iframe.addEventListener("load", function() {

                if(t!=null)clearTimeout(t);

                t=setTimeout(function(){
                    fade.style.opacity = "0";
                },0);

                document.title = iframe.contentWindow.document.title;


                t=setTimeout(function(){
                    fade.style.zIndex = "-1";
                },300);

            }, true);


        </script>

    </body>
</html>

每个子页面都有以下代码：

<script>
function go() {
    window.parent.postMessage("showLoadScreen", "*");
}
</script>
<a href="somepage.html" onclick="go()">somepage.html</a>

这段代码有点不同，除非请求的资源需要一段时间才能加载，否则推子不会弹出。但是，你明白了。

由于iframe仅出于视觉目的而存在，因此不会引起任何重大问题。但是，请注意，此代码使用 HTML5 的postMessageAPI，您可能需要对其进行一些调整。

于 2013-01-17T21:57:11.547 回答