所属分类:网页特效-导航菜单
ul#menu li{float:left;position:relative;width:48px;height:48px;padding:0 5px;}
ul#menu li img{position:absolute;width:48px;top:0px;left:0px;overflow:hidden;}
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bubbleup.js"></script>
$(function() {
$("ul#menu li img").bubbleup({tooltip: true, scale: 96});
});
<ul id="menu">
<li><a href="http://www.sucainiu.com/"><img src="images/feed.png" alt="素材牛"/></a></li>
<li><a href="http://www.sucainiu.com"><img src="images/email.png" alt="jQuery特效"/></a></li>
<li><a href="http://www.sucainiu.com/templates"><img src="images/twitter.png" alt="网站模板"/></a></li>
<li><a href="http://www.sucainiu.com/"><img src="images/facebook.png" alt="I'm on FaceBook"/></a></li>
<li><a href="http://www.sucainiu.com/"><img src="images/delicious.png" alt="Save it!"/></a></li>
<li><a href="http://www.sucainiu.com/"><img src="images/technorati.png" alt="Favorite this blog"/></a></li>
</ul>
参数 | 描述 | 默认值 |
tooltip | 是否显示提示信息 | false |
scale | 放大比例 | 96 |
fontFamily | 字体样式 | Helvetica, Arial, sans-serif |
color | 字体颜色 | #333333 |
fontSize: | 字体大小 | 12 |
fontWeight | 字体加粗 | bold |
inSpeed | 打开速度 | fast |
outSpeed | 关闭速度 | fast |