多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);