多Tabs的横向滚动插件（支持Zepto和jQuery）

一. 效果图

 

二. 功能介绍

　　1. 支持横向移动

　　2. 支持点击Tab后该Tab居中

　　3. 拉到最左边和最右边后依然可以拉动，只是tabs的移动距离变小。

 

三. 使用说明

　　1. 在你的html中添加Tabs相关的代码。

<div class="analysis-tabs-title">
<ul>
<li class="active" data-param="overview">综合分析</li>
<li data-param="expected_profits">预期收益</li>
<li data-param="bull_profits">追涨能力</li>
<li data-param="profit_ranking">收益排名</li>
<li data-param="bear_loss">抗跌能力</li>
<li data-param="alpha">Alpha</li>
<li data-param="sharpe">夏普比率</li>
</ul>
</div>

　　2. 在你的JS中添加调用插件的代码。

　　　　curShow: 当前选中的Tab的index。

$(".analysis-tabs-title").offsetSlider({
curShow: parseInt($('.analysis-tabs-title ul').find('.active').index())
});

　　3. 添加CSS样式

　　　　tabs数量不同，注意更改ul的width。

.analysis-tabs-title {
overflow: hidden;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
.analysis-tabs-title ul {
width: 180%;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.analysis-tabs-title ul li {
padding: 10px;
text-align: center;
display: block;
}
.analysis-tabs-title ul li:first-child {
margin-left: 8px;
}
.analysis-tabs-title ul li:last-child {
margin-right: 8px;
}
.analysis-tabs-title ul li.active {
color: #8e6cd1;
border-bottom: 2px solid #8e6cd1;
}

　　4. JS源代码

'use strict';
(function($) {
$.extend($.fn, {
offsetSlider: function(obj) {
this.each(function() {
var $self = $(this);
var dom = {
"wrap": $self.find("ul"),
"item": $self.find("li")
};
var settings = {
"len": dom.item.length,
"maxOffset": $('body').width() - dom.wrap.width(),
"distance": 50,
"startX": 0,
"startY": 0,
"curShow": obj ? (obj.curShow ? obj.curShow : 0) : 0
};
var funs = {
init: function() {
funs.getWidthData();
funs.initUI();
if (settings.len > 1) {
funs.bindEvent();
}
},
getWidthData: function() {
settings.itemWidth = [];
settings.FirstLiOffsetLeft = 0;
settings.LiDistance = 0;
dom.item.each(function() {
settings.itemWidth.push($(this)[0].offsetWidth);
});
settings.FirstLiOffsetLeft = dom.item[0].offsetLeft;
if (settings.itemWidth.length <= 1) return;
settings.LiDistance = (dom.wrap.width() - 2 * settings.FirstLiOffsetLeft - eval(settings.itemWidth.join('+'))) / (settings.itemWidth.length - 1);
},
updateOffset: function() {
if (settings.itemWidth.length <= 1) {
settings.currentOffset = settings.offset = 0;
} else {
settings.curShow = Math.min(settings.curShow, settings.itemWidth.length - 1);
var allLiWidth = 0
for (var i = 0; i < settings.curShow; i++) {
allLiWidth += settings.itemWidth[i];
}
// leftOffSet + last (n-1) li width + (n-1) * lis distance + this li width / 2; 
var leftDistance = settings.FirstLiOffsetLeft + allLiWidth + settings.curShow * settings.LiDistance + settings.itemWidth[settings.curShow] / 2;
var currentOffset = parseInt($(window).width() / 2 - leftDistance);
if (currentOffset > 0) {
settings.currentOffset = settings.offset = 0;
} else if (currentOffset < settings.maxOffset) {
settings.currentOffset = settings.offset = settings.maxOffset;
} else {
settings.currentOffset = settings.offset = currentOffset;
}
}
dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")
dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");
},
initUI: function() {
if (!settings.curShow) {
settings.currentOffset = settings.offset = 0;
dom.wrap.css("-webkit-transform", "translate3d(0, 0, 0)");
} else {
funs.updateOffset();
}
},
bindEvent: function() {
dom.item.on({
"click": function(e) {
e.stopPropagation();
settings.curShow = parseInt($(this).index());
funs.updateOffset();
}
});
$self.off().on({
"touchstart": function(e) {
e.stopPropagation();
settings.startX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;
settings.startY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;
},
"touchmove": function(e) {
e.stopPropagation();
e.preventDefault();
var curX = e.touches ? e.touches[0].pageX : e.originalEvent.touches[0].pageX;
var curY = e.touches ? e.touches[0].pageY : e.originalEvent.touches[0].pageY;
var moveX = curX - settings.startX;
var moveY = curY - settings.startY;
if (Math.abs(moveY) > Math.abs(moveX)) {
window.event.returnValue = true;
} else {
e.preventDefault();
}
dom.wrap.css("-webkit-transition", "")
var val = moveX + parseInt(settings.offset);
if (val < settings.maxOffset) {
if (Math.abs(val - settings.maxOffset) > settings.distance) {
settings.currentOffset = -settings.distance / 2 + (val - settings.maxOffset + settings.distance) / 5 + settings.maxOffset;
} else {
settings.currentOffset = (val - settings.maxOffset) / 2 + settings.maxOffset;
}
} else if (val > 0) {
if (val > settings.distance) {
settings.currentOffset = (val - settings.distance) / 5 + settings.distance / 2;
} else {
settings.currentOffset = val / 2;
}
} else {
settings.currentOffset = val;
}
dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");
},
"touchend": function(e) {
e.stopPropagation();
if (settings.currentOffset < settings.maxOffset) {
dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")
settings.currentOffset = settings.offset = settings.maxOffset;
} else if (settings.currentOffset > 0) {
dom.wrap.css("-webkit-transition", "-webkit-transform 0.5s ease-in-out")
settings.currentOffset = settings.offset = 0;
} else {
settings.offset = settings.currentOffset;
}
dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");
},
"webkitTransitionEnd": function(e) {
e.stopPropagation();
e.preventDefault();
dom.wrap.css("-webkit-transition", "")
if (settings.currentOffset < settings.maxOffset) {
settings.currentOffset = settings.offset = settings.maxOffset;
} else if (settings.currentOffset > 0) {
settings.currentOffset = settings.offset = 0;
} else {
settings.offset = settings.currentOffset;
}
dom.wrap.css("-webkit-transform", "translate3d(" + settings.currentOffset + "px, 0, 0)");
}
});
$(window).on({
"resize": function() {
funs.adjustPos();
},
"orientationchange": function() {
funs.adjustPos();
}
});
},
adjustPos: function() {
settings.maxOffset = $('body').width() - dom.wrap.width();
funs.getWidthData();
funs.initUI();
}
};
funs.init();
});
}
});
})(window.jQuery || window.Zepto);