javascript + css 利用div的scroll属性让TAB动感十足

做了一个动感十足的TAB不敢独占，写出来大家共享，大家可以到宝宝孕历首页看看效果。

其实现是通过js控制div的scrollLeft属性来实现的，tab分成两个部分tab头部分和tab体部分，tab体是一个很宽的层，此div的overflow被设置成hidden，在鼠标挪动到不同的tab标签上时，逐渐修改tab体的scrollLeft属性。

实现的js代码如下：

/*scroll*/
var Scroller = Class.create();
Scroller.prototype = {
    initialize:function(options){
        this.commandsWrapId = options.commandsWrapId;
        this.scrollWrapId = options.scrollWrapId;
        this.sectionWidth = options.sectionWidth;
        this.step = options.step;
    },
    scrollTo : function(ev){
        if(!ev)ev = window.event;
        var otriger = getSrcElement(ev);
        while(otriger && otriger.tagName != 'LI'){
            otriger = otriger.parentNode;
        }
        Scroller.runningInstance = otriger.scroller;
        var instance = otriger.scroller;
        for(var i=0;i<instance.triggers.length;i++){
            instance.triggers[i].className = 'command unselected';
        }
        otriger.className = 'command selected';
        
        var index = otriger.scrollIndex;
        if(instance.interval)window.clearInterval(instance.interval);
        instance.targetLeft = index * instance.sectionWidth;
        //计算一个step,要求在500ms内转到指定位置
        instance.step = Math.abs((instance.targetLeft - instance.wrap.scrollLeft)/25);
        instance.interval = window.setInterval(instance.scrollByStep,10);
    },
    scrollByStep : function(){
        var i = Scroller.runningInstance;
        var current = parseInt(i.wrap.scrollLeft);
        if(current > i.targetLeft){
            if(current - i.targetLeft < i.step)i.wrap.scrollLeft = i.targetLeft;
            else i.wrap.scrollLeft = i.wrap.scrollLeft - i.step ;
        }else if(current < i.targetLeft){
            if(i.targetLeft - current < i.step)i.wrap.scrollLeft = i.targetLeft;
            else i.wrap.scrollLeft = i.wrap.scrollLeft + i.step;
        }else{
             if(i.interval){
                window.clearInterval(i.interval);
             }
        }
    },
    bindEvent : function(scroller){
        scroller.wrap = $id(scroller.scrollWrapId);
        var ocommands = $id(scroller.commandsWrapId);
        var olis = $tagsC('LI','command',ocommands);
        scroller.triggers = olis;
        if(olis){
            for(var i=0;i<olis.length;i++){
                olis[i].scrollIndex = i;
                olis[i].scroller = scroller;
                addEvent(olis[i],'mouseover',scroller.scrollTo);
            }
        }
    }
};

需要在页面上调用的css和js代码如下：

>