Question

我正在创建一个网站，我想这样做，如果你点击页面底部的按钮，你会转到一个不同布局的新.html文件，但我希望它看起来像那个新的页面向上滑动，看起来很酷。

以下是一个例子：

<!DOCTYPE html>
<html>
<body>

    <p>Create a link of an image:
        <a href="default.asp">
            <img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>

    <p>No border around the image, but still a link:
        <a href="default.asp">
            <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>
</body>
</html>

我需要它，以便当您点击图片时它会转到一个新页面，但是当它转到新页面时会出现“向上滑动”过渡。

谢谢！

Answer 1

您可以使用iFrame来完成此任务：

JS Fiddle Demo

我使用jQuery Transit进行过渡效果：

$("#myLink").click(function () {
    $('#newPage').transition({top: '0%' });
});

Answer 2

我不确定标准导航是否可行。一些应该可能的选择：

使用JavaScript进行导航（通过将所有内容放在同一页面或通过AJAX）
将所有内容放在同一页面上并使用:target和CSS过渡

对于选项1，如果您使用历史记录API，则仍可在浏览器中使用合理的URL。

Answer 3

我使用类似的东西取得了成功：http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

唯一的问题是，您可能会看到新页面的短暂闪烁，然后会消失，然后进行转换。如果不使用iframe或类似的东西，这或多或少是不可避免的。我一般不愿意这样做。

Answer 4

你也可以尝试实现像vertical slider这样的东西，就像coda slider一样，但是这个是为垂直滚动而开发的。 Demo

我尝试将这些过渡完整页面，并发现它很难。（但我是JQ N00B）

Magic slider提供横向和纵向滚动，可以更容易实现。

另请查看this（tutorial here），这可能是您需要的简单解决方案。

实际上我认为最后一个是你想要的壁橱

如何进行页面转换

4 个答案:

JS Fiddle Demo