Question

我正在为iPad编写一个简单的HTML5应用程序，我正在寻找一个简单的jquery解决方案来进行页面转换。我知道你会推荐 jQueryMobile ，但问题是它使用ajax加载当前页面中的下一页然后启动转换，因此我试图加载的页面的css受到干扰{{3} }。我也试过 see my question 这个插件是我正在寻找的东西，但问题是它不能与iPad一起工作，而且在转换过程中页面闪烁很多，所以我放弃了这个选项。我找到的另一个选项是jQTouch，但据我所知，jQTouch仅适用于div的过渡效果，不知道如何将其用于页面转换。

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

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

Answer 1

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

首先在body标签后添加：

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

然后将div和image的样式类添加到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 .. :)

用于页面转换的jquery插件

1 个答案: