javascript + css 利用div的scroll属性让TAB动感十足_html/css_WEB-ITnose

做了一个动感十足的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[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               else  i.wrap.scrollLeft  =  i.wrap.scrollLeft  –  i.step ;
        } else   if (current               if (i.targetLeft  –  current               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[i].scrollIndex  =  i;
                olis[i].scroller  =  scroller;
                addEvent(olis[i], ‘ mouseover ‘ ,scroller.scrollTo);
            }
        }
    }
};

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

Code

.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;}

addLoadEvent(function(){
var scroller = new Scroller({commandsWrapId:’divScrollCommands’,scrollWrapId:’divScrollWrap’,sectionWidth:600,step:10});
scroller.bindEvent(scroller);});