今天站长之家来分享一个非常漂亮的页面加载效果,当内容未加载完成时全页面以黑色透明层显示,中间会有正在加载字样。当内容加载完成时黑色透明层自动消失,本dede教程很简单,大家按照下面的步骤操作即可。
一、在<head></head>之间加入以下代码:
<script type="text/javascript">
<!--
jQuery(function(){
jQuery('#loading-one').empty().append('页面载入完毕...').parent().fadeOut('slow');
});
//-->
</script>
然后再次添加<script type="text/javascript" src="/js/jquery.js"></script>
jquery.js文件可到http://www.apkye.com进行下载。
二、在<body>之后加入以下代码:
<div id="loading"><p id="loading-one" οnclick="javascript:turnoff('loading')">页面载入中...</p></div>
三、在CSS中加入以下样式:
#loading{position:fixed!important;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999;opacity:.6;filter:alpha(opacity=60);font-size:14px;line-height:20px;background-color:#000;background-image:url(../img/load.gif);background-repeat:no-repeat;background-position:center center;}
#loading-one{color:#fff;position:absolute;top:50%;left:50%;margin:20px 0 0 -50px;padding:3px 10px;}
四、后面进行生成静态即可看到效果。
全程演示地址:安卓在线www.apkye.com
文章来自全球站长之家(www.dosxp.com):http://www.dosxp.com/dede_tutorial/4482.html