如何进行页面转换

我正在制作一个网站，我想让它，如果你点击页面底部的一个按钮，你去一个新的。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>

我需要它是这样的，当你点击图片时，它会进入一个新页面，但是当它进入那个新页面时，有一个"向上滑动"的过渡。

谢谢!

您可以使用iFrame来完成此操作:

JS Fiddle Demo

我使用jQuery Transit来实现过渡效果:

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

我不确定标准导航是否可行。一些可能的选项:

使用JavaScript进行导航(通过将所有内容放在同一页面上或通过AJAX)
把所有的东西放在同一个页面上，使用:target和CSS过渡

对于选项1，如果你使用历史API，你仍然可以在浏览器中拥有合理的url。

我已经成功地使用了这样的东西:http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

唯一的问题是，你可能会看到一个短暂的新页面的闪光，然后会消失，然后过渡进来。如果不使用iframe或类似的东西(我通常不喜欢这样做)，这或多或少是不可避免的。

你也可以尝试实现像垂直滑动条这样的东西，就像结尾滑动条一样，但这个是为垂直滚动而开发的。演示。

我试着在整个页面上做这种过渡，发现很难。(但我是JQ N00B)

魔术滑块提供水平和垂直滚动，可以更容易实现。

也可以看看这个(这里的教程)，这可能是一个简单的解决方案，你需要什么。

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

JS Fiddle Demo

相关内容

最新更新

热门标签：