SlideMenu

• 
• 
• 
• 
• 

代码如下:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > BySideMenu </ title >
< style  type ="text/css" >
body {
    margin :  0px ;
    padding :  0px ;
}
#bysidemenu {
    padding : 0px ;
    left :  10px ;
    border :  2px solid #B0B0B0 ;
    list-style-type :  none ;
    top :  10px ;
    float :  left ;
}

#bysidemenu li {
    border-top :  2px solid #FFFFFF ;
}

#bysidemenu .first  {
    border-top :  none ;
}

/*  demo index  */
#indexmenu  {
    margin :  30px ;
    border :  2px solid #404040 ;
}

#indexmenu div {
    border-left :  1px solid #000 ;
}

#indexmenu .first {
    border-left :  none ;
}


</ style >
< script  type ="text/javascript" >
var  isIE6  =  navigator.userAgent.indexOf( ' MSIE 6.0 ' )  !=   - 1 ;
isIE6  &&  document.execCommand( " BackgroundImageCache " , false , true ); 
var  $  =   function (id){
     return   " string "   ==   typeof  id  ?  document.getElementById(id) : id;
}
var  $$  =   function (e, tag){
     return  e.getElementsByTagName(tag);
}
var  Tween  =  {
    Linear:  function (t,b,c,d){ return  c * t / d + b;},
    Quad: {
        easeOut:  function (t,b,c,d){
             return   - c  * (t / =d)*(t-2) + b;
        }
    },
    Bounce: {
        easeIn:  function (t,b,c,d){
             return  c  -  Tween.Bounce.easeOut(d - t,  0 , c, d)  +  b;
        },
        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;
            }
        },
        easeInOut:  function (t,b,c,d){
             if  (t  <  d / 2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
             else   return  Tween.Bounce.easeOut(t * 2 - d,  0 , c, d)  *  . 5   +  c * . 5   +  b;
        }
    }
}
function  Event(e){
     var  oEvent  =  document.all  ?  window.event : e;
     if  (document.all) {
         if (oEvent.type  ==   " mouseout " ) {
            oEvent.relatedTarget  =  oEvent.toElement;
        } else   if (oEvent.type  ==   " mouseover " ) {
            oEvent.relatedTarget  =  oEvent.fromElement;
        }
    }
     return  oEvent;
}
function  addEvent(oTarget, sType, fnHandler){
     if (window.addEventListener){
        oTarget.addEventListener(sType, fnHandler,  false );
    } else   if (window.attachEvent){
        oTarget.attachEvent( " on "   +  sType, fnHandler);
    } else {
        oTarget[ " on "   +  sType]  =  fnHandler;
    }    
}
var  CancelBubble  =   function (e){
     var  e  =  e  ||  window.event;
     if (e.stopPropagation){
        e.stopPropagation();
    } else {
        e.cancelBubble  =   true ;
    }    
}
var  CurrentStyle  =   function (e){
     return  e.currentStyle  ||  document.defaultVeiw.getComputedStyle(e,  null );
}
var  Extend  =   function (destination, source){
     for ( var  pro  in  source){
        destination[pro]  =  source[pro];
    }
     return  destination;
}
var  Contains  =   function (a, b){
     return  a.contains  ?  a  !=  b  &&  a.contains(b) :  !! (a.compareDocumentPosition(b)  &   16 );
}
var  Each  =   function (array, callback, thisObj){
     if (array.forEach){
        array.forEach(callback, thisObj);
    } else {
         for ( var  i  =   0 , len  =  array.length; i  <  len; i ++ ) callback.call(thisObj, array[i], i, array);
    }
}
var  Class  =  {
    create:  function (){
         return   function () {
             this .initialize.apply( this , arguments);
        }
    }
}


//  ========================================================
//               ===== images slider ====
//  script: ooMinder
//  http://blog.csdn.net/OOminder
//  date: 2009-09-16
//  ========================================================

var  BySideMenu  =  Class.create();
BySideMenu.prototype  =  {
     // * ==== the function init ==== */
    initialize:  function (containerId, childType, options){
         this .container  =  $(containerId)
         var  Container  =  $(containerId), oThis  =   this ;
         this .Childs  =  $$(Container, childType);
         var  num  =   this .Childs.length;
         this .SetOptions(options);
        Extend( this ,  this .options);
         this .timer  =   null , iWidth  =   0 , iHeight  =   0 ;
         if ( !! this .autoSize){
            iWidth  =   this .Childs[ 0 ].childNodes[ 0 ].offsetWidth;
            iHeight  =   this .Childs[ 0 ].childNodes[ 0 ].offsetHeight;
        } else {
            iWidth  =   this .containerWidth; 
            iHeight  =   this .containerHeight;
        }
        Container.style.width  =  iWidth  +   " px " ;
        Container.style.height  =  iHeight  +   " px " ;
        Container.style.position  =   " relative " ;
        Container.style.overflow  =   " hidden " ;
         this .defaultDis  =  ( !! this .vertical  ?  iHeight : iWidth) /  num;
         this .openSize  =  ( !! this .vertical  ?  iHeight : iWidth) -  (num  -   1 )  *   this .compressSize;

        Each( this .Childs,  function (oList, index){        
            oList.style.position  =   " absolute " ;
             this .SetPosition(oList,index);       
            oList.style[ this .vertical  ?   ' top '  :  ' left ' ]  =  oList._target  +   " px " ;
            addEvent(oList,  this .expandMode,  function (){oThis.SetTarget(index)});
        },  this );

         !! this .pinMode  &&  addEvent(Container,  this .pinMode,  function (e){
             var  o  =  Event(e).relatedTarget;
             ! Contains(Container, o)  &&  oThis.SetTarget( ' reset ' );            
        });

    },
     /*  ==== set the default params ====  */
    SetOptions:  function (options){
         this .options  =  {
            defaultIndex:  ' none ' ,        //  默认展开索引.
            expandMode:  " mouseover " ,     //  展开触发事件
            pinMode:  " mouseout " ,         //  关闭触发事件
            vertical:  false ,             //  展开方向
            compressSize:  40 ,             //  图片压缩后宽度
            autoSize:  false ,             //  是否自适应如果true则下面两个属性无效
            containerWidth:  300 ,         //  autoSize为false时.容器的宽度
            containerHeight:  385 ,         //  autoSize为false时.容器的高度
            time:  0 ,                     //  缓动频率
            duration:  30 ,                //  缓动步长(越短越快)
            tween: Tween.Linear             //  缓动公式
        };
        Extend( this .options, options  ||  {});
    },
     /*  ==== set searching the target ====  */
    SetTarget:  function (i){
        Each( this .Childs,  function (oList, index){
             if (i  ==   ' reset ' ){
                this .SetPosition(oList, index);
            } else {
                oList._target  =  index  <=  i  ?  (index  *   this .compressSize) :  this .openSize  +  (index - 1 ) *   this .compressSize;
            }  
            oList._b  =  parseInt(oList.style[ !! this .vertical  ?   ' top '  :  ' left ' ]);
            oList._c  =  oList._target  -  oList._b;
        },  this );    
         this .t  =   0 ; this .d  =   this .duration;
         this .Move();
    },
     /*  ==== move object ====  */
    Move:  function (){        
        clearTimeout( this .timer);    
         if  ( this .t  <   this .d) {
             var  oThis  =   this ;
            Each( this .Childs,  function (o){            
                o.style[ !! this .vertical  ?   ' top '  :  ' left ' ]  =  Math.round( this .tween( this .t, o._b, o._c,  this .d))  +   " px " ;
            }, this );
             this .t ++ ;  this .timer  =  setTimeout( function (){oThis.Move();},  this .time);
        } else {
            Each( this .Childs,  function (o){ o.style[ !! this .vertical  ?   ' top '  :  ' left ' ]  =  o._target  +   " px " ; },  this );
        }
    },
     /*  ==== store the init status ====  */
    SetPosition:  function (oList,index){
         if ( this .defaultIndex  ==   ' none ' ){
            oList._target  =  index  *   this .defaultDis;
        } else {
             var  len  =   this .Childs.length;
             if ( this .defaultIndex  <   0 )  this .defaultIndex  =    0 ;
             else   if ( this .defaultIndex  >=  len)  this .defaultIndex  =  len;
            oList._target  =  (index  <=   this .defaultIndex)  ?  index  *   this .compressSize : (index - 1 )  *   this .compressSize  +   this .openSize;
        }  
    }
}

</ script >
</ head >
< body >
<!--  Demo1  -->
< div  id ="indexmenu" >
     < div  class ='first' >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf10.jpg" />
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf14.jpg" />
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf24.jpg" />
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf04.jpg" />     
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf01.jpg" />     
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf15.jpg" />     
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf41.jpg" />     
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf26.jpg"   />
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf50.jpg"   />
     </ div >
     < div >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_sf19.jpg"   />
     </ div >
</ div >
<!--  Demo2  -->
< ul  id ="bysidemenu" >
     < li  class ='first' >
         < img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_creditcardsV.jpg"   />
     </ li >
     < li >< img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_gamesV.jpg"   /></ li >
     < li >< img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_computerV.jpg"   /></ li >
     < li >< img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_eiffeltowerV.jpg"   /></ li >
     < li >< img  src ="http://images.cnblogs.com/cnblogs_com/ooMinder/210824/o_electronicV.jpg"   /></ li >
</ ul >
< div  style ="clear:both" ></ div >
< script  type ="text/javascript" >
<!--
     //  ============== Demo1 ====================
     var  myIndexMenu  =   new  BySideMenu( ' indexmenu ' , ' div ' ,{
        expandMode:  ' mouseover ' ,   //  图片展开触发事件如'mouseover','click'
        containerWidth: 750 ,           //  容器宽度 如果设置autoSize:true那么将取第一张图片的宽度
        containerHeight:  334 ,       //  容器高度 同上.
        compressSize:  35            //  压缩后距离 当焦点移到某张图片,其余图片间的空隙
    });
    
     //  ============== Demo2 ====================
     var  mySideMenu  =   new  BySideMenu( ' bysidemenu ' , ' li ' ,{
        defaultIndex:  0 ,          //  默认展开图片索引 0--图片的数量(小于0则为0, 大于最多数量则为最多数量)
        expandMode:  ' click ' ,      //  展开事件设置为'click'
        vertical:  true ,              //  设置展开方式 默认为false(横向展开) true(纵向展开)
        pinMode:  false ,              //  设置闭合模式 默认为mouseout(移开容器恢复默认状态).false则为不回复.(也可设置click等)
        duration:  50 ,              //  步长
        tween: Tween.Bounce.easeOut  //  Tween缓动模式 默认为Linear (目前提供三种) 也可以自定义
    });

// -->
</ script >
</ body >
</ html >

转载于:https://www.cnblogs.com/ooMinder/archive/2009/09/19/1570057.html