页面载入提示美化版

wordpress
移动设备上继续阅读
目录
  1. 第一步
  2. 第二步
  3. 第三步
  4. 第四步

之前发布过一篇《超链接的载入提示》，作用就是将当前你点击的超链接的 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()

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