素材牛VIP会员

jQuery图标按钮冒泡插件bubbleup.js

 所属分类:网页特效-导航菜单

 浏览:2383次  评论:0次  更新时间:2016-11-01
牛币素材VIP可免积分下载
jQuery图标按钮冒泡插件bubbleup.js兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:bubbleup.js图标实现当鼠标悬浮在图标菜单上时,图标会自动放大,鼠标离开后,会恢复到原状。

详细介绍

使用方法:

引入核心CSS样式

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;}

引入jQuery库文件、插件JS文件

<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});
});

HTML结构

<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>

bubbleup相关API参数

参数描述默认值
tooltip是否显示提示信息false
scale放大比例96
fontFamily字体样式Helvetica, Arial, sans-serif
color字体颜色#333333
fontSize:字体大小12
fontWeight字体加粗bold
inSpeed打开速度fast
outSpeed关闭速度fast

相关素材 - 导航菜单

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)