<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
<style type="text/css">
.tabs {
width: 100%;
border-bottom: 1px solid #20eeff;
height: 50px;
overflow: hidden;
}
.tabs-lines {
width: auto;
margin: auto;
position: relative;
height: 100%;
white-space: nowrap;
overflow: visible;
}
.tab-item {
cursor: pointer;
display: inline-block;
height: 50px;
margin-right: 20px;
text-align: center;
color: #333;
font-size: 16px;
}
.tab-wrap {
display: inline-block;
width: 90%;
margin-left: 20px;
line-height: 50px;
height: 50px;
position: relative;
overflow: hidden;
}
.tab-button {
display: inline-block;
background: transparent;
border: none;
width: 40px;
height: 50px;
line-height: 50px;
color: #ccc;
cursor: pointer;
vertical-align: top;
outline: none;
cursor: not-allowed;
}
.tab-button-active {
color: #20eeff;
cursor: pointer;
}
.tab-checked {
color: #20eeff;
border-bottom: 6px solid #1DA9C5;
}
.tab-item span {
display: inline-block;
}
.tab-content {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab-wrap">
<div class="tabs-lines">
</div>
</div>
<button id="left" class="tab-button">
<span class="glyphicon glyphicon glyphicon-triangle-left"></span>
</button>
<button id="right" class="tab-button tab-button-active">
<span class="glyphicon glyphicon-triangle-right"></span>
</button>
</div>
<script src="../../js/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function overWidthScroll(length) {
var lastItemWidth = $('.tab-item').eq(length - 1).width();
var lastItemLeft = $('.tab-item')[length - 1].offsetLeft;
var itemBoxWidth = lastItemWidth + lastItemLeft;
var outWidth = $('.tab-wrap').width(); // 90% 可视范围的宽度
if (itemBoxWidth <= outWidth) {
$('#left').hide()
$('#right').hide()
return
}
$('.tabs-lines').width(itemBoxWidth);
var a = parseInt(itemBoxWidth /( outWidth - 200)) //商
let b = parseInt(itemBoxWidth % outWidth) // 余数
var index = 0
var leftPxArr = [];
$('#right').click(function() {
index++
let currentLeft = $('.tabs-lines').position().left;
$('.tabs-lines').animate({ left: currentLeft - outWidth + 200 });
changeButtonStyle(index, a)
})
$('#left').click(function() {
index--
let currentLeft = $('.tabs-lines').position().left;
$('.tabs-lines').animate({ left: currentLeft + outWidth - 200 });
changeButtonStyle(index, a)
})
}
function changeButtonStyle(index, times) {
if (index === 0) {
$('#left').attr('disabled', true).removeClass('tab-button-active')
} else {
$('#left').attr('disabled', false).addClass('tab-button-active')
}
if (index === times) {
$('#right').attr('disabled', true).removeClass('tab-button-active')
} else {
$('#right').attr('disabled', false).addClass('tab-button-active')
}
}
function tabChange(param1, ele) {
$('.tab-item').removeClass('tab-checked');
$(ele).addClass('tab-checked');
}
var res = {
"data": [{
"code": "46b95d369e7747a88d80de58a5ce89aa",
"displayField": "2019",
"valueField": "6"
},
{
"code": "4eec222a582340608aea4266c3b5bab2",
"displayField": "乙二醇",
"valueField": "8"
},
{
"code": "284d94011731426483ed75e426080dcb",
"displayField": "方方达",
"valueField": "9"
},
{
"code": "ece4ae3061234eba974e50e30c70bb95",
"displayField": "发顺丰的",
"valueField": "10"
},
{
"code": "647693ed869740178a93c4e63e7f8a03",
"displayField": "444",
"valueField": "11"
},
{
"code": "078119c61270463c8ab08f76143576da",
"displayField": "777发发发发发",
"valueField": "12"
},
{
"code": "5aee2e86e5414c7c8dd61824b39da08b",
"displayField": "9999开心开心开心",
"valueField": "13"
},
{
"code": "9a513b2d57e1484492ee3b241a589fff",
"displayField": "fdsa大多是发生",
"valueField": "14"
},
{
"code": "5bcc3b0c61eb441db2269b11943828fc",
"displayField": "fdsaffff男男女女",
"valueField": "15"
},
{
"code": "fa8731cc1bc248f2a0472b42d68019b0",
"displayField": "fdsafdadfdsfd看看看看扩",
"valueField": "16"
},
{
"code": "6da8c8d4eb044b5da0966c4dc42f62b5",
"displayField": "9999999",
"valueField": "17"
},
{
"code": "c4bc1a22b9e546b6b14f81b630a90161",
"displayField": "蜡油",
"valueField": "21"
},
{
"code": "c4bc1a22b9e546b6b14f81b630a90161",
"displayField": "世界你好",
"valueField": "21"
},
{
"code": "c4bc1a22b9e546b6b14f81b630a90161",
"displayField": "范德萨",
"valueField": "21"
},
{
"code": "c541374d9ca44134b88a7390bdbcc77e",
"displayField": "0000000",
"valueField": "22"
}
],
"errorInfo": "",
"msg": "操作成功",
"result": true
}
res.data.forEach(function(item, index) {
if (index == 0) {
$('.tabs-lines').append('<div class="tab-item tab-checked" onclick="tabChange(' + item.valueField + ', this)"><span>' + item.displayField + '</span></div>');
tabChange(item.valueField, $('.tab-item').eq(0))
} else {
$('.tabs-lines').append('<div class="tab-item" onclick="tabChange(' + item.valueField + ', this)"><span>' + item.displayField + '</span></div>');
}
})
// overWidthScroll(res.data.length)
otherScroll()
function otherScroll() {
var $lastMovewidths = 0, // 上一次移动的距离
$moveWidths = 0, // 当前移动的距离
$moveWidthArr = [0], // 所有可能移动距离的集合
$times = 0, // 一个方向 可以移动的总次数
$index = 0; // 记录点击 按钮的次数
var $width = $(".tab-wrap").width();
var $child = $(".tabs-lines").find(".tab-item");
var $length = $child.length;
for(var i = 0;i < $length; i++){
$moveWidths = $($child[i]).width() + 20 + $lastMovewidths;
if($moveWidths > $width){
$moveWidthArr.push(($moveWidthArr[$times] || 0) + $lastMovewidths);
$moveWidths = 0;
$times++;
i--;
}
$lastMovewidths = $moveWidths;
}
$('#right').click(function() {
$('.tabs-lines').animate({ left: - $moveWidthArr[$index + 1] });
$index++;
$('#left').attr('disabled', false).addClass('tab-button-active')
if($index >= $times){
$('#right').attr('disabled', true).removeClass('tab-button-active');
}
})
$('#left').click(function() {
$('.tabs-lines').animate({ left: - $moveWidthArr[$index - 1] });
$index--;
$('#right').attr('disabled', false).addClass('tab-button-active');
if($index <= 0){
$('#left').attr('disabled', true).removeClass('tab-button-active')
}
})
}
</script>
</body>
</html>
