Question

我搜索过StackOverflow帖子和各种论坛，但找不到答案。我已经找到了类似问题的答案，但没有什么能够让我理解它。我理解大量的PHP和HTML，但是我对脚本有困难。

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

我之前尝试使用随机位代码的问题：

如果在加载时点击了其他链接，则会在页面之间进行，但只会部分淡化第二页。
每个链接都必须有自己的脚本来指导它。永远无法弄清楚如何让它获得点击链接的href。
示例非常复杂，我无法将其修改为我所需要的。我需要了解它的过程。

Answer 1

类似的东西：

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

使用可以返回所需内容的HTML页面或PHP脚本的关键。您可能希望从其他元素检索URL或将其硬编码到脚本中 - 您的调用。有关load()的工作原理的详细信息，请visit jQuery's documentation。

Answer 2

我实际上是在不久前开发出类似的东西。

技巧（或技巧）是将页面包装成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的postMessage API，您可能需要对其进行一些调整。

DIV内容淡入/淡出混乱

2 个答案: