Question

我希望在两个网域之间实现页面转换效果。一个是mcpixel.co.uk/new，第二个是mcpaper.co.uk。我拥有这两个域名。我希望如果单击标题中的链接，页面淡入淡出过渡到新页面，因此页面之间没有任何白色或闪烁。程序主要用PHP编写，使用Javascript / JQuery（最新编写）和CSS。

Mock Up Page transition. Fade frome one page to the other

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
  MCPaper - Your Number #1 Minecraft Newspaper
</title>
<meta name="description" content="A newspaper with news dedicated to Minecraft!">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<script type="text/javascript" src="css/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
$('#ip').click(function() {
        $('.top-network').slideToggle("slow");
});
});
    function toggle()
    {
        $('.top-network').slideToggle("slow");
    }
</script>
 </head>
<?php 
if($_GET['ref']=='network')
{
echo "<body onload='toggle()'>";
echo "<center><div class='top-network' id='top-network'>";
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a>
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a>
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a>
echo "</div>";
}
else
{
echo "<body>";
echo '<center><div class="top-network" id="top-network" style="display: none;">';
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a>
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a>
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a>
echo "</div>";
}
?>
  <div class="top">
    <div class="top-container">
      <div class="ip" id="ip">
        <font color='yellow'>Click to see the RedstoneTor.ch Network</font>
      </div>

这是我的代码，我没有尝试任何东西，因为我不知道从哪里开始。

Answer 1

您只需使用js / jquery即可：点击活动，淡出页面：

$('body').fadeOut('500');

然后重定向到您想要的网址。

这是一个教程：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Answer 2

点击隐藏当前页面：

$('body').fadeOut('500');

Redirect到新页面：

window.location.href = "http://stackoverflow.com";

在新页面上隐藏所有内容：

<body style="display:none;">

脚本：

$(document).ready(function() {
  $("body").fadeIn(2000);
});

但是你可能会在fadeOut之后看到一个白页。可以使用iframe进行更好的转换......

淡入淡出页面之间的页面转换

2 个答案: