用jQuery实现一个网页加载时的过渡特效

在浏览网页的时候，我们都会有这样一个感觉，如果点开一个网页很慢，要等很久才能加载完毕，而整个过程又没有很好的过渡，我们会选择关闭这个网页，所以为了加强用户体验，很多网页在设计的时候，会选择给页面过渡过程加一个特效，比如加一个“网页正在加载中”的提示，在网页加载完成后，会提示“加载完成”，这样网页加载过渡的过程就不会显得枯燥无味。

余斗以前研究过这个效果，大部分教程都是教大家用pJax或者aJax来实现，这样不仅代码冗长，还要额外添加一个大的div框包含全部content，余斗不建议用这种方法，而推荐使用今天这个方法通过jQuery，并在body中加一段html代码就能轻松实现，效果展示：

具体教程为：

一、加载jquery.min.js(文件在文章底部有下载链接)，如果你的网页中已经有了这个js的引用，那么就可以忽略第一步，直接进入第二步

<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
 

二、在head中加如下js代码

<script type="text/javascript">
jQuery(function(){
jQuery('#loading-one').empty().append('页面加载完毕.').parent().fadeOut('slow');
});</script>
 

三、在body标签后加过渡效果显示的样式html代码

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(这里输入一个图片地址) no-repeat center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中,请稍后...</p>
</div>
 

其中图片可加可不加，余斗加了一个滚动圆环的图片，这样显得有意思一些，大家可以点击《一个网页加载时的过渡特效展示》预览效果，文件下载地址：http://pan.baidu.com/s/1eRxAzei

资源均来自第三方，谨慎下载，前往第三方网站下载