使用 jQuery 给导航栏增加 tooltip 效果

首先声明, 我不是高手; 其次, 折腾这个东西纯粹因为闲的筋疼.

我想要达到的效果是这样: 当鼠标悬停在链接上时, 会跳出一个有透明感的气泡. 见如下的例子,

Hover over me

当然除此以外还可以实现其它效果, 详细的可见插件主页.

如何安装插件?

1, 在这个页面下载了插件以后上传到服务器;

2, 在 header 里添加如下几行(具体应根据上传位置的不同进行调整):



第一行的意思是调用 jQuery; 第二行设置动态效果的 css; 第三行则是调用实现此效果的插件: tipsy;

3, 在 body 当中添加如下代码:


这是定义链接的 id;

4, 最后就是按如下方式编写链接:

主页

12条评论

ZH CEXO 评论于 31/01/2010 @ 13:18

原来是个插件啊,呵呵,这个效果挺别致的,不错

[回复]

Todd 回复于 31/01/2010 @ 13:21

@ZH CEXO, 嗯, 严格的说不是 WordPress 插件, 而是 jQuery 插件.

[回复]

南天 评论于 31/01/2010 @ 14:36

技术帝~~

[回复]

Arcthur 评论于 31/01/2010 @ 14:42

为什么叫java效果呢...这个是tooltips效果吧

[回复]

Todd 回复于 31/01/2010 @ 14:43

@Arcthur, 我不懂啊, 呵呵, 是 tooltip, tooltip 不是 java 的一种?

[回复]

Arcthur 回复于 31/01/2010 @ 21:15

@Todd, 当然 ^^,Java是一种语言啊~

[回复]

NickyYe 评论于 31/01/2010 @ 15:23

哈哈
不仅是闲,而且看来很惬意啊

[回复]

文科浩 评论于 1/02/2010 @ 2:28

深更半夜,来欣赏下。
不过俺半躺在床上实在没那心情折腾这些代码。

以及我在听红白蓝...合辑。

[回复]

木鱼猫 评论于 1/02/2010 @ 11:23

膜拜技术帝~
咋一看还以为下面那个Tweet输入框是文章里的东西呢

[回复]

Todd 回复于 1/02/2010 @ 12:13

@木鱼猫, 呵呵,用于在 twitter 上分享的。

[回复]

暂不留名 评论于 3/02/2010 @ 0:43

我已经搬家到独立博客了:http://izanbu.com/,请更新友情链接,谢谢!

[回复]

Kars 评论于 11/02/2010 @ 23:38

装了一个 跟你那个 不太一样 、、用的也是 jQuery ,也是一个 Tooltip 、、

[回复]

评论与回复

or trackback this post

注册 Gravatar, 在评论中显示头像

使用新浪微博登陆

通过新浪, 豆瓣登陆后可进入后台修改邮箱, 接收回复邮件提醒