使用 jQuery 给导航栏增加 tooltip 效果
首先声明, 我不是高手; 其次, 折腾这个东西纯粹因为闲的筋疼.
我想要达到的效果是这样: 当鼠标悬停在链接上时, 会跳出一个有透明感的气泡. 见如下的例子,
当然除此以外还可以实现其它效果, 详细的可见插件主页.
如何安装插件?
1, 在这个页面下载了插件以后上传到服务器;
2, 在 header 里添加如下几行(具体应根据上传位置的不同进行调整):
<script type="text/javascript" src="/jquery-1.4.1.js"></script> <link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" /> <script type="text/javascript" src="/javascripts/jquery.tipsy.js"></script>
第一行的意思是调用 jQuery; 第二行设置动态效果的 css; 第三行则是调用实现此效果的插件: tipsy;
3, 在 body 当中添加如下代码:
<script type='text/javascript'>
$(function() { $('#example').tipsy(); });
</script>这是定义链接的 id;
4, 最后就是按如下方式编写链接:
<a id="example" href="http://ichentao.com/blog/" title="Hello World">主页</a>
12 Comments