javascript css uses the scroll attribute of div to make the TAB dynamic_html/css_WEB-ITnose

I made a dynamic TAB and I don’t dare to monopolize it, so I wrote it and shared it with everyone. You can go to the baby pregnancy chart homepage to see the effect.

The implementation is achieved by controlling the scrollLeft attribute of the div through js. The tab is divided into two parts: the tab header part and the tab body part. The tab body is a very wide layer, and the overflow of this div is set to hidden , when the mouse moves to different tab labels, the scrollLeft attribute of the tab body is gradually modified.

The implemented js code is as follows:

/* 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代码如下：

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