HTML代码
<div class="nav-title">
<div class="nav-move" onclick="moveLeft();">
<img src="../img/left.png"/>
</div>
<ul class="button-lclb">
<li>
<button type="button" id="btn-index" class="btn btn-default btn-group-lclb " aria-label="Left Align">
<p>首页</p>
</button>
</li>
</ul>
<div class="nav-move nav-move-right" onclick="moveRight();">
<img src="../img/right.png"/>
</div>
</div>
js代码
//导航栏左移
var btn_width = 120;
function moveLeft(){
var lbWidth = $('.button-lclb').width();
var moveNum = Math.floor(lbWidth/btn_width);//移动的个数
var li_length = $('.button-lclb li').length;
//根据显示的个数和需要移动的个数判断需不需要左移
if(moveNum<li_length){
//通过获取left的值判断有没有左移过
var leftPX = $('.button-lclb').css("left");
var leftPXNum = leftPX.substring(0,leftPX.length-2);
if(leftPXNum<0){
//如果已经进行移动过之后首先计算li的总长度,除以标签行的宽度判断最最多左移几次
var sumLength = Math.ceil(li_length*btn_width);//ul的总长度
var numOfTimes = Math.ceil(sumLength/lbWidth)-1;//能够移动的次数
//计算已经移动的次数
var moveUlNum = Math.ceil(Math.abs(leftPXNum)/lbWidth);
//如果已经移动的次数小于能够移动的次数便移动
if(moveUlNum<numOfTimes){
var moveWidth = (moveUlNum+1)*moveNum*btn_width;
$('.button-lclb').attr('style','left:-'+moveWidth+'px;');
}
}else{
var moveWidth = moveNum*btn_width;
$('.button-lclb').attr('style','left:-'+moveWidth+'px;');
}
}
}
//导航栏右移
function moveRight(){
var lbWidth = $('.button-lclb').width();
//先获取已经左移的像素
var leftPX = $('.button-lclb').css("left");
var leftPXNum = leftPX.substring(0,leftPX.length-2);
//如果已经左移了,则进行右移,没有则不执行
if(leftPXNum<0){
var moveNum = Math.floor(lbWidth/btn_width)*btn_width;//一次移动多少像素
var moveWidth = Number(leftPXNum) + Number(moveNum);
if(Math.abs(moveWidth)<moveNum){
$('.button-lclb').attr('style','left:0px;');
}else{
$('.button-lclb').attr('style','left:'+moveWidth+'px;');
}
}
}
scss代码
.button-lclb p{
display: inline;
}
.nav-title{
overflow: hidden;
position: relative;
.nav-move{
position: absolute;
display: inline-block;
top: 15px;
width: 42px;
height: 42px;
background-color: #FFFFFF;
cursor: pointer;
z-index: 2;
img{
display: block;
vertical-align: middle;
margin: 0 auto;
margin-top: 9px;
}
}
.nav-move-right{
right: 0;
}
}
.button-lclb{
margin: 15px 0 15px 0;
padding: 0 42px;
position: relative;
left: 0;
white-space: nowrap;
font-size: 0;
transition: all .2s;
-webkit-transition: all .2s;
li{
display: inline-block;
// margin: 0 3px;
.btn-group-lclb{
position: relative;
margin: 0;
padding: 10px 0;
padding-left: 5px;
padding-right: 18px;
width: 120px;
border: none;
border-radius: 0;
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid #f6f6f6;
color: #666666;
span{
position: absolute;
float: right;
right: 4px;
top: 12px;
}
}
}
}
.lclb-current,.lclb-current:active{
background-color: #1a56a8 !important;
color: #FFF !important;
}