左右布局滑动切换Tab选项卡

var container = document.getElementById('container');
var content = document.getElementById('content');
var oDivs = DOM.children(content, "div");
oDivs[0].st = 0;
for (var i = 1; i < oDivs.length; i++) {
    oDivs[i].st = oDivs[i].offsetTop;
}
var oLis = DOM.getElesByClass("tabOption");
var flag = 0;
var upFlag = oLis.length;; (function() {
    function fn(e) {
        e = e || window.event;
        if (e.wheelDelta) {
            var n = e.wheelDelta;
        } else if (e.detail) {
            var n = e.detail * -1;
        }
        if (n > 0) {
            container.scrollTop -= 12;
        } else if (n < 0) {
            container.scrollTop += 12;
        }
        slider.style.top = container.scrollTop * container.offsetHeight / content.offsetHeight + "px";
        slider.offsetTop * (content.offsetHeight / container.offsetHeight);
        var st = container.scrollTop;
        if (st > this.preSt) {
            for (var j = 0; j < oLis.length; j++) {
                if (st < oDivs[j].st) break;
            }
            if (oLis[j - 2] && this.preLi !== j) {
                if ((j) > (flag + 1)) {
                    DOM.removeClass(oLis[j - 2], "selectedTab");
                    DOM.addClass(oLis[j - 1], "selectedTab");
                    animate(blueline, {
                        top: (j - 1) * 48
                    },
                    500, 2);
                }
            }
            flag = j - 1;
        } else if (st < this.preSt) {
            for (var j = oLis.length - 1; j >= 0; j--) {
                if (st > oDivs[j].st) break;
            }
            if (oLis[j + 2] && this.preLi !== j) {
                if (flag === undefined) return;
                if ((j) < (flag)) {
                    for (var k = 0; k < oLis.length; k++) {
                        DOM.removeClass(oLis[k], "selectedTab");
                    };
                    DOM.addClass(oLis[j + 1], "selectedTab");
                    animate(blueline, {
                        top: (j + 1) * 48
                    },
                    500, 2);
                    upFlag = j + 1;
                }
            }
        }
        this.preSt = st;
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    container.onmousewheel = fn;
    if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
    slider = document.Element('span');
    slider.id = "slider";
    slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
    sliderParent.appendChild(slider);
    on(slider, "mousedown", down);
    var blueline = document.getElementById("blueline");
    function changeTab() {
        var index = DOM.getIndex(this);
        for (var i = 0; i < oLis.length; i++) {
            DOM.removeClass(oLis[i], "selectedTab");
        }
        DOM.addClass(this, "selectedTab");
        animate(container, {
            scrollTop: oDivs[index].st
        },
        500, 1);
        var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
        animate(slider, {
            top: t
        },
        500);
        animate(blueline, {
            top: index * 48
        },
        500, 2);
    }
    var tabPannel1 = document.getElementById("outerWrap");
    var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].onclick = changeTab;
    };
})();