制作页面过渡动画

Question

我最近注意到互联网上的一些页面(如Gizmodo和io9)具有页面加载动画。在后一种情况下，前一个页面是灰色的，中间有一个小的加载“微调”动画，而第二个页面则没有中间的空白加载页面，就像互联网上的大多数页面一样。这是怎么做的？

Answer 1

希望这对你有用...下面的解决方案对我有效，尽管需要jQuery：

首先，在body标签后面添加以下内容：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

然后将div和图像的样式类添加到css中：

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最后，将此javascript添加到页面中(最好是在页面的末尾，当然是在关闭body标记之前)：

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

然后通过style类调整加载图像的位置和加载div的背景颜色。

这就是它，工作得很好。当然，您必须在某个地方拥有ajax-loader.gif。

试试AJAXLoad，他们那里有一些很棒的动画GIF。:)

Answer 2

我没有看过参考过的网站，但听起来像是jQuery候选网站。

您可以使用ajax调用来获取页面内容，然后将其加载到当前DOM中，以替换当前显示的内容。

jQuery框架有动画和插件来显示您所描述的行为。我喜欢的一个是ColorBox (http://www.jacklmoore.com/colorbox)。