首页 归档 标签 关于

页面载入提示美化版


436 1 167.5k

之前发布过一篇《超链接的载入提示》,作用就是将当前你点击的超链接的 text 值换成设置的提示语来达到提示的效果,之前还觉得蛮好玩的,后来再久酷那发现了更好玩的提示,于是就让我的摸了过来,再加上阿邙那个载入后消失的动画的创意,于是这个美化版的就诞生了。效果大家可以点击这里查看,不过看完后记得返回来,这个效果只在当前页面打开才有效。

第一步

修改 header.php 打开你所用的主题文件中的 header.php ,并且在 body 后面加上:

1
<div id="loading_">页面正在读取中...</div>

要注意的是,你的主题必须加载了 jQuery ,而且一定要在这段代码之前加载的才能有效果。

第二步

添加 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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;
}

背景颜色、字体颜色、显示位置等属性大家自己修改吧。

第三步

添加 A 标签点击效果 页面内的所有 A 标签(不包括 新窗口打开、JS、锚记 的A标签)都具有这个点击效果。

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
$('#container a:not(a[target*=_blank] , a[href*=javascript] , a[href*=#])').click(function() {
$('#loading_').css({
top: '200px',
left: '45%'
});
$('#loading_').show()
})
})

第四步

提示消失 本段代码建议加载 footer.php 的 的前面,这个时候页面已经加载完毕。

1
$('#loading_').hide()

一个简单又漂亮的提示就做完了。