页面载入提示美化版
之前发布过一篇《超链接的载入提示》,作用就是将当前你点击的超链接的 text 值换成设置的提示语来达到提示的效果,之前还觉得蛮好玩的,后来再久酷那发现了更好玩的提示,于是就让我的摸了过来,再加上阿邙那个载入后消失的动画的创意,于是这个美化版的就诞生了。效果大家可以点击这里查看,不过看完后记得返回来,这个效果只在当前页面打开才有效。
第一步
修改 header.php 打开你所用的主题文件中的 header.php ,并且在 body 后面加上:
1 | <div id="loading">页面正在读取中...</div> |
要注意的是,你的主题必须加载了 jQuery ,而且一定要在这段代码之前加载的才能有效果。
第二步
添加 CSS
1 | #loading{ |
背景颜色、字体颜色、显示位置等属性大家自己修改吧。
第三步
添加 A 标签点击效果 页面内的所有 A 标签(不包括 新窗口打开、JS、锚记 的A标签)都具有这个点击效果。
1 | $(document).ready(function() { |
第四步
提示消失 本段代码建议加载 footer.php 的 的前面,这个时候页面已经加载完毕。
1 | $('#loading').hide() |
一个简单又漂亮的提示就做完了。