2012-11-24 35 views
-3

如果你去这个网站浏览:http://alexdunphy.github.com/refineslide/#installation这个效果是如何实现的? HTML/CSS/jQuery的

,然后点击菜单按钮“安装”,“调整”,“常见问题解答”,“关于”等等......你会发现有是每个页面之间的一个很好的转换,没有整个页面重新加载。

我刚开始网络开发,我想尝试实现类似的效果。

这里有一个关于他是如何做我的猜测:

  1. 的iFrame与内容,按钮会触发要加载每个iFrame的。每个iframe的顶级<div>在一些-webkit--moz-动画。

  2. 的全部内容是一个div,每个按钮简单淡出先前DIV出来,消失在未来DIV与一些CSS动画。

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

在1和2中哪一个更吸引人?

回答

1

它采用了伪选择称为目标,链接追加#pagename的网址,以及适当的动画发生在那里。

的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

+0

感谢哥们。管理使用该方法来理清一些效果:) –

0

如果您使用萤火虫检查网页,可以看到jQuery文件内部(或至少是其中的一部分)具有所有魔力。

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

祝你好运!