-3

如果你在这里访问这个网站：http: //alexdunphy.github.com/refineslide/#installation

然后单击菜单按钮“安装”、“调整”、“常见问题”、“关于”等...您会注意到每个页面之间有一个很好的过渡，而无需重新加载整个页面。

我刚开始Web开发，我想尝试实现类似的效果。

以下是我对他如何做到这一点的猜测：

  1. 具有该内容的 iFrame，按钮会触发要加载的每个 iFrame。每个 iFrame 的顶层<div>都有一些-webkit-或-moz-动画。

  2. 整个内容都在一个 div 中，每个按钮只是简单地将前一个 div 淡出并使用一些 CSS 动画淡入下一个 div。

我会尝试这两个，除非你们知道它是如何完成的。

在 1 和 2 中，哪个更有吸引力？

4

3 回答 3

1

它使用一个名为 target 的伪选择器，链接将 #pagename 附加到 url，并从那里发生适当的动画。

HTML 可能类似于：

<p id='pagename'>This is some text</p>

链接如下所示：

<a href='#pagename'>This link goes to pagename</a>

然后在 CSS 中，你可以定义：

#pagename:target {
    font-weight: bold;
}

当您单击链接时，这将使#pagename 内的文本变为粗体。从这里您可以将其扩展为包含动画，例如将所有 div 的透明度设为 0 并将位置向左：50px；

然后每当一个 div 被定位时，你将不透明度设置为 1，将左侧设置为 0px

编辑：这是我创建的一个快速示例，它模拟了您想要的确切效果：http: //jcolicchio.latestdot.net/test_target.html#page1

于 2012-11-24T04:11:14.037 回答
0

他们很可能正在使用 JQuery 进行转换。

http://jquery.com/

于 2012-11-24T04:07:37.060 回答
0

如果你用 firebug 检查网页，你会发现这个jQuery 文件里面包含了所有的魔法（或者至少是其中的一部分）。

没有看到所有的细节，但我想你可以用纯 jQuery 和 CSS 来实现这个效果。

祝你好运！

于 2012-11-24T04:25:39.920 回答