0

我正在为 iPad 编写一个简单的 HTML5 应用程序，我正在寻找一个用于页面转换的简单 jquery 解决方案。我知道您会推荐jQueryMobile，但问题在于它使用 ajax 在当前页面中加载下一页然后开始转换，因此我尝试加载的页面的 css 受到干扰，请参阅我的问题。我也试过这个，这个插件是我一直在寻找的东西，但问题是它不适用于 iPad，而且在转换时页面闪烁很多，所以我放弃了这个选项。我发现的另一个选项是 jQTouch，但据我所知 jQTouch 仅适用于 div 的过渡效果，不知道如何将其用于页面过渡。

我想要的是，点击 index.html 中的Transition链接时，<a href="index.html">Transition</a>应该会显示过渡效果，而不会出现 index.html 页面的闪烁和 css 干扰。

有人可以向我推荐一些插件，我可以使用它们来实现页面转换，而不会在转换时干扰 CSS。

4

1 回答 1

0

希望这对您有用...尽管需要 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>

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

就是这样，工作得很好。但当然你必须在某个地方有一个 ajax-loader.gif。

试试 AJAXLoad 他们有一些很棒的 GIF 动画.. :)

于 2013-01-04T06:12:34.153 回答