javascript仿QQ滑动菜单

 程序源码

var  QQ  =   function () {
     //  公用函数
     function  T$(id) {  return  document.getElementById(id); }
     function  T$$(root, tag) {  return  (root  ||  document).getElementsByTagName(tag); }
     function  $extend(des, src) {  for ( var  p  in  src) { des[p]  =  src[p]; }  return  des; }
     function  $each(arr, callback, thisp) {
         if  (arr.forEach) {arr.forEach(callback, thisp);} 
         else  {  for  ( var  i  =   0 , len  =  arr.length; i  <  len; i ++ ) callback.call(thisp, arr[i], i, arr);}
    }
     function  currentStyle(elem, style) {
         return  elem.currentStyle  ||  document.defaultView.getComputedStyle(elem,  null );
    }
     //  缓动类
     var  Tween  =  {
        Quart: {
            easeOut:  function (t,b,c,d){
                 return   - c  *  ((t = t / d-1)*t*t*t - 1) + b;
            }
        },
        Back: {
            easeOut:  function (t,b,c,d,s){
                 if  (s  ==  undefined) s  =   1.70158 ;
                 return  c * ((t = t / d-1)*t*((s+1)*t + s) + 1) + b;
            }
        },
        Bounce: {
            easeOut:  function (t,b,c,d){
                 if  ((t / =d) < (1 / 2.75 )) {
                     return  c * ( 7.5625 * t * t)  +  b;
                }  else   if  (t  <  ( 2 / 2.75)) {
                     return  c * ( 7.5625 * (t -= ( 1.5 / 2.75))*t + .75) + b;
                }  else   if  (t  <  ( 2.5 / 2.75)) {
                     return  c * ( 7.5625 * (t -= ( 2.25 / 2.75))*t + .9375) + b;
                }  else  {
                     return  c * ( 7.5625 * (t -= ( 2.625 / 2.75))*t + .984375) + b;
                }
            }
        }
    }

     //  主类构造函数
     var  scrollTrans  =   function (cid, sid, count, config) {
         var  self  =   this ;
         if  ( ! (self  instanceof  scrollTrans)) {
             return   new  scrollTrans(cid, sid, count, config);
        } 
        self.container  =  T$(cid);
        self.scroller  =  T$(sid);
         if  ( ! (self.container  ||  self.scroller)) { 
             return ;
        } 
        self.config  =  $extend(defaultConfig, config  ||  {});
        self.index  =   0 ;
        self.timer  =   null ;
        self.count  =  count;
        self.step  =  self.scroller.offsetWidth  /  count;
    };
    
     //  默认配置
     var  defaultConfig  =  {
        trigger:  1 ,  //  触发方式1:click other: mouseover
        auto:  true ,  //  是否自动切换
        tween: Tween.Quart.easeOut,  //  默认缓动类
        Time:  10 ,  //  滑动延时
        duration:  50 ,     //  切换时间
        pause:  3000 ,  //  停顿时间
        start:  function () {},  //  切换开始执行函数
        end:  function () {}  //  切换结束执行函数
    };

    scrollTrans.prototype  =  {
        constructor: scrollTrans,
        transform:  function (index) {
             var  self  =   this ;
            index  ==  undefined  &&  (index  =  self.index);
            index  <   0   &&  (index  =  self.count  -   1 )  ||  index  >=  self.count  &&  (index  =   0 );            
            self.time  =   0 ;
            self.target  =   - Math.abs(self.step)  *  (self.index  =  index);
            self.begin  =  parseInt(currentStyle(self.scroller)[ ' left ' ]);
            self.change  =  self.target  -  self.begin;
            self.duration  =  self.config.duration;
            self.start();
            self.run();
        },

        run:  function () {
             var  self  =   this ;
            clearTimeout(self.timer);
             if  (self.change  &&  self.time  <  self.duration) {
                self.moveTo(Math.round(self.config.tween(self.time ++ , self.begin, self.change, self.duration)));
                self.timer  =  setTimeout( function () {self.run()}, self.config.Time);
            }  else  {
                self.moveTo(self.target);
                self.config.auto  &&  (self.timer  =  setTimeout( function () {self.next()}, self.config.pause));
            }
        },

        moveTo:  function (i) {
             this .scroller.style.left  =  i  +   ' px ' ;
        },

        next:  function () {
             this .transform( ++ this .index);
        }
    };

     return  {
        scroll:  function (cid, sid, count, config) {
                window.onload  =   function () {
                     var  frag  =  document.createDocumentFragment(),
                        nums  =  [];
                     for  ( var  i  =   0 ; i  <  count; i ++ ) {
                         var  li  =  document.createElement( ' li ' );
                        (nums[i]  =  frag.appendChild(document.createElement( ' li ' ))).innerHTML  =  i  +   1 ;
                    }
                    T$( ' c_page ' ).appendChild(frag);

                     //  调用主类
                     var  st  =  scrollTrans(cid, sid, count, config);
                    $each(nums,  function (o, i) {
                        o[st.config.trigger  ==   1   ?   ' onclick '  :  ' onmouseover ' ]  =   function () { o.className  =   ' on ' ; st.transform(i); }
                        o.onmouseout  =   function () { o.className  =   '' ; st.transform();}
                    });
                    st.start  =   function () {
                        $each(nums,  function (o, i) {
                            o.className  =  st.index  ==  i  ?   ' on '  :  '' ;
                        });    
                    };
                    st.transform();
                }
        }
    }
}();
    
QQ.scroll( ' c_container '   /* 外部容器ID */ ,  ' scroller ' /* 滑动容器ID */ ,  5 /* 切换图片数目 */ , {trigger:  0 }  /* 默认配置 */ );

源码下载

 Slide