超链接的载入提示

29 Comments

大家会注意到，点击日志标题后，会出现“载入中...”的提示，给人的第一感觉很友好、人性化。昨天在万戈的博客发现了这修改方法。

首先载入 JQuery 库（不知道怎么载入的去问 Google），然后再加入点击的关键代码，代码如下：

<script type="text/javascript">
$(document).ready(function($) {
    $('#content .post h2 a').click(function(e) {
        if (e.which == 2) {
            return true
        } else {
            $(this).html('<b>loading...</b>');
            $('#clickload').show();
            window.location = $(this).attr('href')
        }
    })
});
 
</script>

其中“#content .post h2 a”在本博客的位置就是日志的标题，如果大家还想在别的地方加入这个效果，比如我要在本主题的侧栏随机日志中加入此效果，可以在“#content .post h2 a”后面加入“,#sidebar .widget_recent_random_posts a”，任何位置都可以加入，用英文逗号分开就可以了。

更多信息大家可以围观：http://wange.im/loading-effect-by-jquery.html

2010-05-23 17:38 / 分享网事 / wordpress, jquery, 提示

如果你有钱，请赏我一点。

腾讯微博新浪微博 Twitter 豆瓣人人 QQ空间 Facebook

已有 29 条评论 »

彼岸星辰 2010-05-23 18:20:11

回复

又是前排。。
小峰JoysBoy 2010-05-23 19:41:32

回复

不错，不过主题本来不用jquery的为了这个功能影响加载速度不太值得吧
冰剑 2010-05-23 21:21:40

回复

@小峰JoysBoy
我也不仅仅只这一个功能用到了JQuery，还有一些其他的地方也用到了。
WP-EasyArchives，这个存档插件也用到了JQuery。
浩子 2010-05-23 21:25:35

回复

貌似没啥多大的用处，放弃……
自己玩吧……
浩子 2010-05-23 21:27:32

回复

嘀咕那个玩意不错，好久有空了我弄过去……哈哈 :mrgreen:
万戈 2010-05-23 22:07:47

回复

哈哈，我刚想说呢，我也有用这个效果，一看是我的链接
冰剑 2010-05-23 22:35:03

回复

@浩子
好看、用户体验感更强，反正就是折腾嘛。
@万戈
博客里有几个jquery的效果都是你那来的，你那成了我找jq的好地方。
逸冰 2010-05-23 23:12:07

回复

我有个主题正在修改之中......不知道能不能用的着...
冰剑 2010-05-24 00:40:53

回复

@逸冰
你也开始折腾主题了啊？
FORECE 2010-05-24 04:26:19

回复

有时候一直载入挺烦人的。
沉冰浮水 2010-05-24 09:42:34

回复

嘿嘿。。我就是围观下。。资深菜菜。。
彼岸星辰 2010-05-24 11:50:59

回复

订阅的那个你怎么就直接给CUT掉了？
冰剑 2010-05-24 12:55:04

回复

@FORECE
没一直载入啊，跳转了就会消失的。
@沉冰浮水
我也是资深菜鸟一名。
@彼岸星辰
找不到那个JS在哪里，所有文件都找遍了，都找不出来。
平平 2010-05-24 13:02:59

回复

好非常强大。可是这跟我有什么关系呢
小白 2010-05-25 20:38:43

回复

博主，关注您博客很久了，可以和您做一个友情吗？
冰剑 2010-05-25 23:40:03

回复

@小白
是吗？我怎么没见过你？无友情不连接，不好意思。
小不点 2010-05-28 20:17:01

回复

。。我承认我喜欢……但是不知道用哪儿
冰剑 2010-05-28 23:20:35

回复

@小不点
jQuery的效果，BOBLOG里面一样的可以实现，需要实现的话可以帮你。
你现在的主题没以前的好看了，感觉怪怪的。
海天 2010-05-29 16:09:12

回复

呵呵这个效果我已经加了~
海天 2010-05-29 16:10:05

回复

没看到留言板唉~
先在这说吧
博主
请将海天无影BLOG（htwy.org.ru）的名称改为海天无影Movie，谢谢
现在新的海天无影BLOG地址为（blog.haitianhome.com），如能得博主不弃，愿再做友链，海天感激不尽。
当然，新链不做，老链友谊继续，欢迎互访~
冰剑 2010-05-29 17:05:03

回复

@海天无影
我想去掉你的影视博客的连接，然后换上海天BLOG的连接，可以不？
因为我不想做非心情博客类的连接，呵呵。
海天 2010-05-29 17:25:05

回复

@冰剑
哈哈当然可以~
幸好我新开了一个博客
要不然和冰剑大侠就没有纽带了~
我去加你~
奥德雷的雷人事迹 2010-05-31 20:42:03

回复

细节之中见用户体验啊
龙崽 2010-06-01 11:29:50

回复

我感觉这个东西会让载入速度变慢。。。
冰剑 2010-06-01 17:07:03

回复

@龙崽
因为有个插件用到了jquery，所以放着也是浪费，利用起来也不会影响速度的。
逸冰 2010-06-04 13:23:09

回复

小日记也加个***，郁闷
彼岸星辰 2010-06-04 13:47:36

回复

@逸冰
必须的啊。这个怕被人看见了。
搜搜 2010-06-24 00:08:21

回复

请问怎么把这个写进 js里
冰剑 2010-06-24 18:32:27

回复

@搜搜
这本来就是js啊，你复制上面的内容放到页面中就可以了。

最近回复

超链接的载入提示

已有 29 条评论 »

– 用户面板

– 我的应用

– 实时动态（测试）

– User Online（测试）