页面载入提示美化版

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

第一步

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

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

要注意的是,你的主题必须加载了 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 的 的前面,这个时候页面已经加载完毕。

$('#loading').hide()

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

THE END
wordpressjqueryhack
被屏蔽的广告
安装bbPress并整合wordPress

添加评论

已有 51 条评论

由 Google AI Gemini Pro 生成

你的日志很有趣,我之前也做过类似的尝试,但你的方法更加详细和美观。特别是将提示语与加载动画相结合,让等待的过程变得更加生动有趣。我迫不及待地想在自己的博客中尝试一下这种方法。谢谢你的分享!

逸冰
逸冰 2010-08-01 14:38 回复
浙江 Windows XP Firefox

这个提示很友好,效果也不错

冰剑
冰剑 MOD 2010-08-01 20:08 回复
湖南 Windows 7 Firefox

我也蛮喜欢的,哈哈。

浩子
浩子 2010-08-01 15:30 回复
贵州 Windows 7 Internet Explorer

围观下……

海天无影
海天无影 2010-08-01 15:34 回复
江苏 Windows XP Firefox

小时的动态的确不错 呵呵

海天无影
海天无影 2010-08-01 15:35 回复
江苏 Windows XP Firefox

话说给你个意见 将那个动态消失的地方改到你的侧边的广告 或者热点栏目上
吸引访客眼球啊 哈哈

冰剑
冰剑 MOD 2010-08-01 20:08 回复
湖南 Windows 7 Firefox

好主意,不过页面有时候所在的位置都不同,不好判断。

MOPVHS
MOPVHS 2010-08-01 17:35 回复
浙江 Windows 7 Chrome

感觉像宫女倒完茶慢慢退下去的样子... :twisted:

MOPVHS
MOPVHS 2010-08-01 17:40 回复
浙江 Windows 7 Chrome

搞起全站Ajax就完美了~~~

对了,冰剑,点“网盘”以后“页面正在读取中...”不会消失...

另外...求网盘弹出效果代码...其他的林木木那里有~~~

冰剑
冰剑 MOD 2010-08-01 20:08 回复
湖南 Windows 7 Firefox

很邪恶的描述,不过我喜欢,哇哈哈。。
网盘那的是个问题,我想让他有这个效果,但是他不会消失,纠结。
那网盘弹出的方法以前发过的:http://www.binjoo.net/2010/07/website-box-disk/,自己表达能力不好,不知道你能不能看懂。

N
N 2010-08-17 15:27 回复
江苏 Windows XP Chrome

又是全站ajax,你挺迷恋ajax的嘛,可是我暂时还不会 :cry:

冰剑
冰剑 MOD 2010-08-17 16:14 回复
湖南 Windows 7 Firefox

这可不是Ajax啊,仅仅只是个假象。。
你再试试你名字提交评论,这下应该没问题了。

平平
平平 2010-08-02 02:09 回复
江苏 Windows XP Internet Explorer

页面正在假装加载。。。。真戳心啊

冰剑
冰剑 MOD 2010-08-02 02:23 回复
湖南 Windows 7 Firefox

不能欺骗访客嘛,本来就是在加载,假装正在异步加载而已。

平平
平平 2010-08-02 02:25 回复
江苏 Windows XP Internet Explorer

丫的 还不睡觉 夜猫子啊

丕子
丕子 2010-08-02 07:01 回复
山东 Linux Firefox

我也试试

insect
insect 2010-08-02 09:42 回复
陕西 Windows XP Chrome

这个提示很不错,很友好

彼岸星辰
彼岸星辰 2010-08-02 13:02 回复
陕西 Windows XP Internet Explorer

给你来点个广告试试。。
ps.终于找到你所说的QQ云输入了、、

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

谢谢啦,感动流涕。
难道你才发现吗?那么明显的地方。

zchiy2k
zchiy2k 2010-08-03 01:31 回复
QUADRANET.COM Windows 7 Chrome

嘿嘿,以人为本么~

冰剑
冰剑 MOD 2010-08-03 01:32 回复
湖南 Windows 7 Firefox

丫的,那么晚了还不睡觉,难道和我同类?夜猫一族的?

zchiy2k
zchiy2k 2010-08-03 01:33 回复
QUADRANET.COM Windows 7 Chrome

必须的!我在等待睡意来临的那一刻~

冰剑
冰剑 MOD 2010-08-03 01:36 回复
湖南 Windows 7 Firefox

我还在等周公来找我,他差不多两个多小时以后才上班。

zchiy2k
zchiy2k 2010-08-03 01:37
QUADRANET.COM Windows 7 Chrome

那我不陪你了,睡去喽~
:mrgreen:

冰剑
冰剑 MOD 2010-08-03 01:38
湖南 Windows 7 Firefox

哎,留下我孤苦伶仃寡人一个,去吧,朕准了。

忘记浪漫
忘记浪漫 2010-08-02 16:47 回复
北京 Windows XP Firefox

围观下……

小武
小武 2010-08-02 17:38 回复
河北 Windows XP Firefox

主题改的不错,个性十足,挺有爱。

貌似js的小机关用的不少吧。

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

呵呵,谢谢夸奖,挺有爱是什么意思?
用了很多JQ,不过JQ也是基于JS写的,也算是JS的小机关,呵呵。

阿邙
阿邙 2010-08-02 17:52 回复
河南 Windows 7 Chrome

如果速度够快就不用提示 不过俺不想用国内的主机 :mrgreen:

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

俺是国外空间,早受不了国内的备案、空间限制等邪恶的事情了。

海天无影
海天无影 2010-08-02 23:39 回复
江苏 Windows XP Chrome

话说你的@回复 消失的效果也不错啊 看来这个消失jQ代码很不错~

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

其实那个是从别人那摸来的,我也不记得是哪摸的了,嘘,别让他看到。

Zk
Zk 2010-08-02 23:50 回复
广东 Windows 7 Internet Explorer

固定背景··效果显示的不错啊·

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

我比较习惯固定的,不固定看着怎么都不爽。

zchiy2k
zchiy2k 2010-08-02 23:54 回复
黑龙江 Windows 7 Chrome

不过我习惯中键点击新标签打开看,然后老标签页就杯具了。。。

冰剑
冰剑 MOD 2010-08-03 01:28 回复
湖南 Windows 7 Firefox

鄙视你这种钻牛角尖的,我认输,我再加个自动消失的代码。

FORECE
FORECE 2010-08-03 11:00 回复
加拿大 Windows 7 Firefox

我旅游回来了。。串门来了。

冰剑
冰剑 MOD 2010-08-03 13:26 回复
湖南 Windows 7 Firefox

我说呢,按照你的习惯,一天不写个一两篇心里不舒服。
原来这几天出去旅游去了,呵呵。

小武
小武 2010-08-03 11:13 回复
河北 Windows XP Internet Explorer

“有爱”在百毒百科里有详细解释。对了,发现你的表情栏跟我博客有一样的毛病,就是有时候会闪个不停,估计是那个图片渐显的js搞的鬼。

冰剑
冰剑 MOD 2010-08-03 13:26 回复
湖南 Windows 7 Firefox

了解了,确实很有爱,哈哈。
我没发现有这个毛病,不会闪,是不是你浏览器的问题?

小不点
小不点 2010-08-03 16:11 回复
浙江 Windows XP Chrome

测试。

MOPVHS
MOPVHS 2010-08-03 23:34 回复
浙江 Windows 7 Chrome

飘过...

MVP
MVP 2010-08-04 10:54 回复
加拿大 Windows XP Internet Explorer

居然要关博客。估计那之前你服务器所在地先地震一次 LOL

冰剑
冰剑 MOD 2010-08-04 13:32 回复
湖南 Windows 7 Firefox

震吧震吧,服务器在洛杉矶,要死一起死嘛。

MVP
MVP 2010-08-04 13:35 回复
加拿大 Windows XP Firefox

呵呵~我开个玩笑呢~ 传说北美大陆西海岸会有8.7级地震。于是我慌的很~打算回国了~

冰剑
冰剑 MOD 2010-08-04 16:29 回复
湖南 Windows 7 Firefox

汗,北美大陆西海岸,洛杉矶不就在那吗?看来要天天备份了,以防后患。

睿智小超人
睿智小超人 2010-08-04 14:34 回复
广东 Windows 7 Internet Explorer

效果不错。

Ray
Ray 2010-08-04 15:10 回复
河北 Windows XP Firefox

这个挺好玩的

hey33
hey33 2010-08-04 15:40 回复
河南 Unknown Internet Explorer

hoho 支持下 hey33.com谢谢分享~

ucer
ucer 2010-08-09 00:20 回复
广东 Windows XP Firefox

页面正在假装异岁加载中。。。哈哈。

Zhu
Zhu 2010-08-11 10:06 回复
山西 Windows XP Internet Explorer

不错

尤锃威
尤锃威 2014-06-10 10:36 回复
福建 Windows 8.1 Firefox

唉 要用JS 无爱了

移动设备上继续阅读