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[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

<script> <br />addLoadEvent(function(){ <br />var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10}); <br />scroller.bindEvent(scroller);}); <br /></script>