jQuery多组效果滑动导航栏代码
1、新建html文档。
2、书写hmtl代码。
<h1>左右滚动</h1>
<div class="box">
<ul class="f-nav" id='f-nav'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
<h1>从上向下滚动</h1>
<div class="box">
<ul class="f-nav" id='f-nav2'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
<h1>从下向上滚动</h1>
<div class="box">
<ul class="f-nav" id='f-nav3'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
<h1>从左边缘向右边缘滚动</h1>
<div class="box">
<ul class="f-nav" id='f-nav4'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
<h1>从右边缘向左边缘滚动</h1>
<div class="box">
<ul class="f-nav" id='f-nav5'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
<h1>从中间变大至填满</h1>
<div class="box">
<ul class="f-nav" id='f-nav6'>
<li>首页</li>
<li>分页一</li>
<li>分页二</li>
<li>分页三</li>
<li>分页四</li>
<div class='sideline'></div>
</ul>
</div>
3、书写css代码。
body { margin: 0; padding: 0; }
h1 { text-align: center; font-size: 16px; margin-top: 10px; }
.box { background-color: #202932; margin: 50px 200px; }
.f-nav { height: 60px; overflow: hidden; transition: all 1s; display: block; position: relative; padding: 0; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2); background-color: #202932; }
.f-nav li { padding: 0; margin: 0; float: left; height: 60px; line-height: 60px; position: relative; z-index: 100; display: inline-block; list-style-type: none; width: 100px; color: #fff; text-align: center; cursor: pointer; }
.sideline { position: absolute; background-color: #208ff9; left: 0; top: 0; color: #fff; min-height: 30px; z-index: 1; height: 60px; line-height: 60px; display: inline-block; list-style-type: none; width: 100px; color: #fff; text-align: center; cursor: pointer; }
.f-nav li.active { background-color: #208ff9; color: #fff; }
.f-nav li.fontNav { background-color: #208ff9; color: #fff; }
.f-nav li.downNav { background-color: #208ff9; color: #fff; }
.f-nav li.leftNav { background-color: #208ff9; color: #fff; }
.f-nav li.rightNav { background-color: #208ff9; color: #fff; }
/*左边缘*/
.f-nav li.edgeLeft { background-color: #208ff9; color: #fff;}
/*右边缘*/
.f-nav li.edgeRight { background-color: #208ff9; color: #fff;}
/*从中间变大*/
.f-nav li.scaleChange { background-color: #208ff9; color: #fff;}
@keyframes scaleChange { 0% {
transform: scale(0);
}
, 50% {
transform: scale(.5);
}, 100% {
transform: scale(1);
}
}
@keyframes fontNav { 0% {
transform: translate(0, -100%);
}
, 50% {
transform: translate(0, -50%);
}, 100% {
transform: translate(0, 0);
}
}
@keyframes downNav { 0% {
transform: translate(0, 100%);
}
, 50% {
transform: translate(0, 50%);
}, 100% {
transform: translate(0, 0);
}
}
@keyframes leftNav { 0% {
transform: translate(-100%, 0%);
}
, 50% {
transform: translate(-50%, 0%);
}, 100% {
transform: translate(0, 0);
}
}
@keyframes rightNav { 0% {
transform: translate(100%, 0%);
}
, 50% {
transform: translate(50%, 0%);
}, 100% {
transform: translate(0%, 0);
}
}
@keyframes edgeLeft { 0% {
transform: translate(-100%, -100%);
}
100% {
transform: translate(0%, 0%);
}
}
@keyframes edgeRight { 0% {
transform: translate(100%, 100%);
}
100% {
transform: translate(0%, 0%);
}
}
4、书写并添加js代码。
<script src="js/jquery.min.js"></script>
<script src="js/jquery-nav.js"></script>
<script>
$('#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>
5、代码整体结构。
6、查看效果。
