给emlog“页面添加“正在读取中”效果其实这个效果的原理还是相当的简单的，在在<body>和</body>直接，当读取完毕后效果消失。
下面是步骤：
在 /content/templates/ 里的模版文件 header.php
找到 <body> 在其下面添加
<div id="loading_">页面正在读取中...</div>
<script type="text/javascript">$("#loading_").show();</script>
然后打开footer.php文件
找到</body> 在其上面添加下列代码
<script type="text/javascript" > setTimeout(function() {
$("#loading_").animate({
top: '110px',
left: '35%',
opacity: 'hide'
},
1000)
},
1000);</script>
接着打开 main.css 添加下列
#loading_{
color:#FFF;
font-weight:bold;
padding:5px 15px;
background:#000 ;
z-index:200;
position:fixed !important;/*important*/
position:absolute;/*IE */
float:right;
top:200px;
left:45%;
text-align:center;
display:none;
font-size:14px;
opacity:0.7;
filter:alpha(opacity=70);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
打开 /lib/js/common_tpl.js 在里面添加
$(document).ready(function() {
$('#container a:not(a[target*=_blank] , a[href*=javascript] , a[href*=#])').click(function() {
$('#loading_').css({
top: '200px',
left: '45%'
});
$('#loading_').show()
})
})
最后 在 header.php 加载下 jquery 如果加载过的 可以无视。
<script src="<?php echo BLOG_URL; ?>lib/js/jquery/jquery-1.2.6.js" type="text/javascript"></script>
OK上传搞定收工。
注意： jquery必须比js代码先要加载，不然会导致代码不能正常显示。
发表评论：