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);
            }
        }
    }
};
/*endscroll*/

 

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

<style tpe="text/css">
.scrollCommands{clear:both;width:600px;}
.scrollCommands UL{list-item:none;margin:0px;padding:0px;width:600px;overflow:auto;zoom:1;clear:both}
.scrollCommands UL LI{height:20px;line-height:20px;margin:0px;padding:0px;display:block;float:left;}
.scrollCommands UL LI.command{width:65px;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center}
.scrollCommands UL LI.selected{border-bottom:1px solid #fff;background:#fff;}
.scrollCommands UL LI.unselected{border-bottom:1px solid #f0f0f0;background:#f0f0f0;}
.scrollCommands UL LI.sep{width:10px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:0px solid #fff;border-bottom:1px solid #eee;}
.scrollCommands A{font-size:12px;}
#divScrollWrap{width:600px;overflow:hidden;height:200px;padding:0px;clear:both;margin-bottom:10px;border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;}
.scrollSection{width:600px;overflow:hidden;height:200px;background:#fff;float:left}
.scrollSection H3{font-size:14px;display:block;border-bottom:1px solid #f0f0f0;font-weight:normal;margin:0px 0px 5px 0px;padding:2px 2px 2px 10px;}
.scrollSection UL{list-style:none;line-height:20px;padding:0px 0px 0px 6px;margin:0px;}
.scrollSection LI{margin:0px;padding:0px 0px 0px 8px;line-height:20px;background:url(/imgs/punyarrowright.gif) no-repeat left 7px;height:20px;overflow:hidden;}
.w280{width:280px;}
</style>
<script type="text/javascript">
addLoadEvent(function(){
var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10});
scroller.bindEvent(scroller);});
</script>

 

欢迎大家点评，指点。

评论

7 楼 gongmingwind 2010-01-28  

希望能提供附件下载，公司访问不了.com网站，以便学习和交流

6 楼 D-tune 2009-11-19  

不错，支持一个。
js和css代码可以进一步简化的哦，建议lz基于jquery做成插件，这样以后的可维护性和扩展性更好。

另外组件的说明希望更详细点，易读点。

5 楼 yukaizhao 2009-06-25  

在不同的tab之间切换就会滑动了

4 楼 tomcatlee 2009-06-20  

滑动的效果？哪里？我怎么没有看到啊？

3 楼 yukaizhao 2009-05-11  

滑动的速度是计算出来的，在500ms内滑动到目标位置。

2 楼 lucane 2009-05-08  

不错
确实是动感十足
滑动的感觉有点快了。。。

1 楼 yukaizhao 2009-05-08  

需要说明的是文中的代码是关键 实现代码，有一些公用的方法没有给出。