其实现是通过js控制div的scrollLeft属性来实现的，tab分成两个部分tab头部分和tab体部分，tab体是一个很宽的层，此div的overflow被设置成hidden，在鼠标挪动到不同的tab标签上时，逐渐修改tab体的scrollLeft属性。
实现的js代码如下：
1 /*scroll*/
2 var Scroller = Class.create();
3 Scroller.prototype = {
4 initialize:function(options){
5 this.commandsWrapId = options.commandsWrapId;
6 this.scrollWrapId = options.scrollWrapId;
7 this.sectionWidth = options.sectionWidth;
8 this.step = options.step;
9 },
10 scrollTo : function(ev){
11 if(!ev)ev = window.event;
12 var otriger = getSrcElement(ev);
13 while(otriger && otriger.tagName != 'LI'){
14 otriger = otriger.parentNode;
15 }
16 Scroller.runningInstance = otriger.scroller;
17 var instance = otriger.scroller;
18 for(var i=0;i<instance.triggers.length;i++){
19 instance.triggers[i].className = 'command unselected';
20 }
21 otriger.className = 'command selected';
22
23 var index = otriger.scrollIndex;
24 if(instance.interval)window.clearInterval(instance.interval);
25 instance.targetLeft = index * instance.sectionWidth;
26 //计算一个step,要求在500ms内转到指定位置
27 instance.step = Math.abs((instance.targetLeft - instance.wrap.scrollLeft)/25);
28 instance.interval = window.setInterval(instance.scrollByStep,10);
29 },
30 scrollByStep : function(){
31 var i = Scroller.runningInstance;
32 var current = parseInt(i.wrap.scrollLeft);
33 if(current > i.targetLeft){
34 if(current - i.targetLeft < i.step)i.wrap.scrollLeft = i.targetLeft;
35 else i.wrap.scrollLeft = i.wrap.scrollLeft - i.step ;
36 }else if(current < i.targetLeft){
37 if(i.targetLeft - current < i.step)i.wrap.scrollLeft = i.targetLeft;
38 else i.wrap.scrollLeft = i.wrap.scrollLeft + i.step;
39 }else{
40 if(i.interval){
41 window.clearInterval(i.interval);
42 }
43 }
44 },
45 bindEvent : function(scroller){
46 scroller.wrap = $id(scroller.scrollWrapId);
47 var ocommands = $id(scroller.commandsWrapId);
48 var olis = $tagsC('LI','command',ocommands);
49 scroller.triggers = olis;
50 if(olis){
51 for(var i=0;i<olis.length;i++){
52 olis[i].scrollIndex = i;
53 olis[i].scroller = scroller;
54 addEvent(olis[i],'mouseover',scroller.scrollTo);
55 }
56 }
57 }
58 };
2 var Scroller = Class.create();
3 Scroller.prototype = {
4 initialize:function(options){
5 this.commandsWrapId = options.commandsWrapId;
6 this.scrollWrapId = options.scrollWrapId;
7 this.sectionWidth = options.sectionWidth;
8 this.step = options.step;
9 },
10 scrollTo : function(ev){
11 if(!ev)ev = window.event;
12 var otriger = getSrcElement(ev);
13 while(otriger && otriger.tagName != 'LI'){
14 otriger = otriger.parentNode;
15 }
16 Scroller.runningInstance = otriger.scroller;
17 var instance = otriger.scroller;
18 for(var i=0;i<instance.triggers.length;i++){
19 instance.triggers[i].className = 'command unselected';
20 }
21 otriger.className = 'command selected';
22
23 var index = otriger.scrollIndex;
24 if(instance.interval)window.clearInterval(instance.interval);
25 instance.targetLeft = index * instance.sectionWidth;
26 //计算一个step,要求在500ms内转到指定位置
27 instance.step = Math.abs((instance.targetLeft - instance.wrap.scrollLeft)/25);
28 instance.interval = window.setInterval(instance.scrollByStep,10);
29 },
30 scrollByStep : function(){
31 var i = Scroller.runningInstance;
32 var current = parseInt(i.wrap.scrollLeft);
33 if(current > i.targetLeft){
34 if(current - i.targetLeft < i.step)i.wrap.scrollLeft = i.targetLeft;
35 else i.wrap.scrollLeft = i.wrap.scrollLeft - i.step ;
36 }else if(current < i.targetLeft){
37 if(i.targetLeft - current < i.step)i.wrap.scrollLeft = i.targetLeft;
38 else i.wrap.scrollLeft = i.wrap.scrollLeft + i.step;
39 }else{
40 if(i.interval){
41 window.clearInterval(i.interval);
42 }
43 }
44 },
45 bindEvent : function(scroller){
46 scroller.wrap = $id(scroller.scrollWrapId);
47 var ocommands = $id(scroller.commandsWrapId);
48 var olis = $tagsC('LI','command',ocommands);
49 scroller.triggers = olis;
50 if(olis){
51 for(var i=0;i<olis.length;i++){
52 olis[i].scrollIndex = i;
53 olis[i].scroller = scroller;
54 addEvent(olis[i],'mouseover',scroller.scrollTo);
55 }
56 }
57 }
58 };
需要在页面上调用的css和js代码如下：
1 <style tpe="text/css">
2 .scrollCommands{clear:both;width:600px;}
3 .scrollCommands UL{list-item:none;margin:0px;padding:0px;width:600px;overflow:auto;zoom:1;clear:both}
4 .scrollCommands UL LI{height:20px;line-height:20px;margin:0px;padding:0px;display:block;float:left;}
5 .scrollCommands UL LI.command{width:65px;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center}
6 .scrollCommands UL LI.selected{border-bottom:1px solid #fff;background:#fff;}
7 .scrollCommands UL LI.unselected{border-bottom:1px solid #f0f0f0;background:#f0f0f0;}
8 .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;}
9 .scrollCommands A{font-size:12px;}
10 #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;}
11 .scrollSection{width:600px;overflow:hidden;height:200px;background:#fff;float:left}
12 .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;}
13 .scrollSection UL{list-style:none;line-height:20px;padding:0px 0px 0px 6px;margin:0px;}
14 .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;}
15 .w280{width:280px;}
16 </style>
17 <script type="text/javascript">
18 addLoadEvent(function(){
19 var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10});
20 scroller.bindEvent(scroller);});
21 </script>
2 .scrollCommands{clear:both;width:600px;}
3 .scrollCommands UL{list-item:none;margin:0px;padding:0px;width:600px;overflow:auto;zoom:1;clear:both}
4 .scrollCommands UL LI{height:20px;line-height:20px;margin:0px;padding:0px;display:block;float:left;}
5 .scrollCommands UL LI.command{width:65px;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center}
6 .scrollCommands UL LI.selected{border-bottom:1px solid #fff;background:#fff;}
7 .scrollCommands UL LI.unselected{border-bottom:1px solid #f0f0f0;background:#f0f0f0;}
8 .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;}
9 .scrollCommands A{font-size:12px;}
10 #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;}
11 .scrollSection{width:600px;overflow:hidden;height:200px;background:#fff;float:left}
12 .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;}
13 .scrollSection UL{list-style:none;line-height:20px;padding:0px 0px 0px 6px;margin:0px;}
14 .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;}
15 .w280{width:280px;}
16 </style>
17 <script type="text/javascript">
18 addLoadEvent(function(){
19 var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10});
20 scroller.bindEvent(scroller);});
21 </script>
