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

‘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,
          "showLen": obj ? (obj.showLen ? obj.showLen : 0) : 0,
          "curShowFix": obj ? (obj.curShowFix ? obj.curShowFix : 0.5) : 0.5,
        };
        var funs = {
          init: function() {
            funs.initUI();
            if (settings.len > 1) {
              funs.bindEvent();
            }
          },
          updateOffset: function() {
            if (settings.showLen && settings.curShow) {
              if (settings.curShow <= settings.showLen) {
                settings.currentOffset = settings.offset = 0;
              } else if (settings.curShow > settings.len - settings.showLen) {
                settings.currentOffset = settings.offset = settings.maxOffset;
              } else {
                var currentOffset = parseInt((settings.curShow - settings.showLen) * settings.maxOffset / (settings.len - 2 * settings.showLen + settings.curShowFix));
                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;
                }
              }
            } else if (settings.showLen) {
              settings.currentOffset = settings.offset = 0;
            }
            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.showLen) {
              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() + 1);
                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)");
              }
            });
          }
        };
        funs.init();
      });
    }
  });
})(window.jQuery || window.Zepto);

.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;
}