/**
 * 横向滚动溢出隐藏导航自动滚动到可视区域函数
 * @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)

标签: js效果

您需要先登录才能发表评论。