懒人之家--可能是JS网页特效代码收集最全的懒站!
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

6种jQuery导航栏滑动动画效果

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-03-18
6种简单好看的jQuery导航栏滑动动画效果,分别有左右滚动、从上向下滚动、从下向上滚动、从左边缘向右边缘滚动、从右边缘向左边缘滚动、从中间变大至填满6种动画效果。


js代码

<script type="text/javascript" src="js/jquery-nav.js"></script>
<script type="text/javascript">
$('#f-nav').tooltip({
default: 2,       // 默认为空  --  选中默认值
width: '200',     // 限制宽度
height: '100',
textList: ['首页','分页1','分页2','分页3'],   // 每个导航的内容
type: 'slideMove',  // 必填, 选择内容
success: function(ret){

}   //初始化回调
});
$('#f-nav2').tooltip({
default: 3,    
type: 'fontUp',
width: '150',
});
$('#f-nav3').tooltip({
type: 'downUp'
});
$('#f-nav4').tooltip({
type: 'edgeLeft'
});
$('#f-nav5').tooltip({
type: 'edgeRight'
});
$('#f-nav6').tooltip({
type: 'scaleChange'
});
</script>