5

我正在制作一个网站，我想制作它，以便如果您单击页面底部的一个按钮，您会转到一个具有不同布局的新 .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>

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

谢谢！

4

4 回答 4

3

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

JS 小提琴演示

我使用jQuery Transit来制作过渡效果：

$("#myLink").click(function () {
    $('#newPage').transition({top: '0%' });
});
于 2013-05-06T17:37:55.240 回答
0

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

  1. 使用 JavaScript 导航（通过将所有内容放在同一页面上或通过 AJAX）
  2. 将所有内容放在同一页面上并使用:targetCSS 过渡

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

于 2013-05-04T02:26:35.833 回答
0

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

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

于 2013-05-06T17:50:52.213 回答
0

您也可以尝试实现垂直滑块之类的东西，很像coda 滑块 ，但这个滑块是为垂直滚动而开发的。演示。

我尝试将这些类型的转换设为整页，但发现它很困难。（但我是JQ N00B）

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

也看看这个（教程在这里）这可能是你需要的一个简单的解决方案。

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

于 2013-05-06T18:15:01.943 回答