/**
* 横向滚动溢出隐藏导航自动滚动到可视区域函数
* @param {string|jQuery} el - 容器元素选择器或jQuery对象
* @param {boolean} isTab - 是否为选项卡模式(可点击切换)
*/
function scNav(el,istab){
$el = $(el);
var $li = $el.find('li');
var $selectedLi = $el.find('li.on');
if ($selectedLi.length > 0) {
var $ul = $el.find('ul');;
var containerWidth = $el.width();
var containerScrollLeft = $el.scrollLeft();
var liPosition = $selectedLi.position().left;
var liWidth = $selectedLi.outerWidth();
var scrollTo = liPosition - (containerWidth / 2) + (liWidth / 2);
$el.animate({scrollLeft: scrollTo}, 500);
if(istab){
$li.click(function() {
$(this).addClass('on').siblings().removeClass('on');
var $lis = $(this);
var wrapperWidth = $el.width();
var wrapperScrollLeft = $el.scrollLeft();
var liPosition = $lis.position().left;
var liWidth = $lis.outerWidth();
var scrollTo = liPosition + wrapperScrollLeft - (wrapperWidth / 2) + (liWidth / 2);
$el.stop().animate({scrollLeft: scrollTo}, 300);
});
}
}
}
//应用
scNav('.scNav',true)