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

做了一个动感十足的tab不敢独占，写出来大家共享，大家可以到宝宝孕历首页看看效果。

其实现是通过js控制div的scrollLeft属性来实现的，tab分成两个部分tab头部分和tab体部分，tab体是一个很宽的层，此div的overflow被设置成hidden，在鼠标挪动到不同的tab标签上时，逐渐修改tab体的scrollLeft属性。

实现的js代码如下：

灵感PPT

AI灵感PPT - 免费一键PPT生成工具

32

查看详情

/* 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>