0

我想知道是否可以在两个 HTML 文档之间进行渐变。我有一些 HTML 页面，但让我们用其中的两个来做一个例子。

index.html, jobs.html

在两者上我都有一个带<a>按钮的菜单。我想做的是：

我单击<a href="jobs.html" id="jobs">Jobs</a>并且index.html（我目前正在）淡出并jobs.html淡入。就像在divs 之间淡入淡出但带有整个 HTML 文档。

非常感谢任何帮助。

4

4 回答 4

4
  1. 使用 css 隐藏身体。
  2. 在体内消散
  3. 单击一个按钮并获取其 ID
  4. 淡出身体
  5. 导航到新网址
<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            display: none;
        }
        .myBtn{
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script>
        $(function(){
            $('body').fadeIn();
            $('.myBtn').click(function(){
                url = $(this).attr('id') + '.html';
                $('body').fadeOut(function(){
                    window.location = url;
                });     
            });
        });
    </script>
</head>
<body>
    <h1>index.html</h1>
    <div class="myBtn" id="index">index</div>
    <div class="myBtn" id="jobs">jobs</div>
</body>
</html>

http://jsfiddle.net/Dp4Hy/

PS。显然小提琴不起作用，因为您正在尝试导航到新页面，但是您仍然可以在开始时看到淡入，并在单击按钮时淡出。只需要包含此脚本供所有页面使用。

于 2013-08-02T14:25:41.737 回答
1

最重要的是，如果没有某种预加载和与服务器端组件的交互，这是不可能的

我个人会推荐 PJAX。http://pjax.heroku.com/它不仅允许您捕获事件并根据事件加载文档，它还可以更新浏览器状态、url、标题、后退按钮的工作原理等。

使用它来完成类似行为的示例网站 http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-春季最佳沙拉

*免责声明，我做了第二个......

于 2013-08-02T14:25:21.097 回答
1

创建您的锚标记并设置一个 javascript onclick 事件。调用你的 fadeOut() 函数（我已经粘贴在下面）你会希望它在你点击时淡出，当下一页加载时，你会希望它淡入：

jsfiddle：http: //jsfiddle.net/HmGap/3/

HTML：

<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>

<div id="body">
    Content <br /><br />
    <a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>

Javascript：

//淡入淡出效果

var fade_in_from = 0;
var fade_out_from = 10;

function fadeIn(element){
    var target = document.getElementById(element);
    target.style.display = "block";
    var newSetting = fade_in_from / 10;
    target.style.opacity = newSetting;
    // opacity ranges from 0 to 1
    fade_in_from++;
    if(fade_in_from == 10){
        target.style.opacity = 1;
        clearTimeout(loopTimer);
        fade_in_from = 0;
        return false;
    }
    var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
    var target = document.getElementById(element);
    var newSetting = fade_out_from / 10;
    target.style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0){
        target.style.opacity = 0;
        target.style.display = "none";
        clearTimeout(loopTimer);
        fade_out_from = 10;
        return false;
    }
    var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
    window.location.href = "link.html";
}
于 2013-08-02T14:34:16.007 回答
0

是的，有可能，您可以在 DIV 中附加 html（如您所知），或者您可以使用 iframe 来管理 iframe 标记的淡入淡出

于 2013-08-02T14:23:07.120 回答