冰剑博客

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

第一步：修改 header.php

打开你所用的主题文件中的 header.php ，并且在 body 后面加上：

<div id="loading_">页面正在读取中...</div>
<script type="text/javascript">$("#loading_").show();</script>

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

第二步：添加 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;
}

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

第三步：添加 A 标签点击效果

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

$(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 的 的前面，这个时候页面已经加载完毕。

<script type="text/javascript" > setTimeout(function() {
    $("#loading_").animate({
        top: '110px',
        left: '35%',
        opacity: 'hide'
    },
    1000)//动画消失效果时间
},
1000); //页面载入多久以后才开始执行</script>

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