网站JS源码2--DIV伸缩控件

先看张效果图片吧： 点击查看效果

 

实现原理原理大家都知道，就是改变DIV长宽(UL,LI等标签都可以)，技术含量在于就是怎么样去控件这个过程。

放上我的核心代码，可是自己花了几天写的呵呵，本人太懒，不喜欢写注释，下面都是临时加上的^^

 

var  Flex  =  {};
Flex  =  Class.create();
Flex.prototype  =  {
  initialize:  function (options) {
     this .options  =  {
      cont:  '' ,  // 要改变大小的DIV。。
      speed:  0 ,  // 速率
      space: [],  // 每毫秒改变象素大小如[0, 10]，0指（宽）不改变，10指（高）
      wcomp:  0 ,  // （宽）总共伸缩大小，0为不改变,可以为负值
      hcomp:  0   // （高）总共伸缩大小，0为不改变
    };
    Object.extend( this .options, options  ||  {}); 
     this .cont  =   this .options.cont;
     this .speed  =   this .options.speed;
     this .space  =   this .options.space;
     this .wcomp  =   this .options.wcomp;
     this .hcomp  =   this .options.hcomp;
    
     this .c_wcomp  =  Math.abs( this .wcomp);
     this .c_hcomp  =  Math.abs( this .hcomp);
     // 上面代码为什么这样写？如this.wcomp = this.options.wcomp;，就是为了下文调用this.wcomp显得幽雅哈哈
    
     this .play();
  },
  
  play:  function () {
     if ( this .wcomp  ==   0   &&   this .hcomp  ==   0 ){
       return ;
    }
    
     var  Speed  =   this .speed, Space, num;
    
     // 宽度缩小
     if  ( this .wcomp  !=   0 ) {
    Space  =   this .space[ 0 ];
     if (Math.abs( this .wcomp)  <   this .c_wcomp  /   5 ){
      Space  =   Math.round(Math.abs( this .wcomp  /   5 ));
       if  (Space  >   this .space[ 0 ]) Space  =   this .space[ 0 ];
       if (Space  <   1 ) Space  =   1 ;
    }
    
     if  ( this .wcomp  <   0 ) {    
       if ( this .wcomp  <   - Space){
         this .wcomp  +=  Space;
        num  =  Space;
      }  else  {
        num  =   - this .wcomp;
         this .wcomp  =   0 ;
      }

       this .setWidth( - num);
    }  else  {
       if ( this .wcomp  >  Space){
         this .wcomp  -=  Space;
        num  =  Space;
      }  else  {
        num  =   this .wcomp;
         this .wcomp  =   0 ;
      }

       this .setWidth(num);
    }}
    
     // 高度缩小
     if  ( this .hcomp  !=   0 ) {
    Space  =   this .space[ 1 ];
     if (Math.abs( this .hcomp)  <   this .c_hcomp  /   5 ){
      Space  =   Math.round(Math.abs( this .hcomp  /   5 ));
       if  (Space  >   this .space[ 1 ]) Space  =   this .space[ 1 ];
       if (Space  <   1 ) Space  =   1 ;
    }    
    
     if  ( this .hcomp  <   0 ) {    
       if ( this .hcomp  <   - Space){
         this .hcomp  +=  Space;
        num  =  Space;
      }  else  {
        num  =   - this .hcomp;
         this .hcomp  =   0 ;
      }

       this .setHeight( - num);
    }  else  {
       if ( this .hcomp  >  Space){
         this .hcomp  -=  Space;
        num  =  Space;
      }  else  {
        num  =   this .hcomp;
         this .hcomp  =   0 ;
      }

       this .setHeight(num);
    }}
    
    setTimeout( this .play.bind( this ), Speed);
  },
  
  setWidth:  function (num) {
     this .cont.style.width  =  Math.abs( this .cont.style.width.replace( ' px ' ,  '' ))  +  num  +   ' px ' ;
  },
  
  setHeight:  function (num) {
     this .cont.style.height  =  Math.abs( this .cont.style.height.replace( ' px ' ,  '' ))  +  num  +   ' px ' ;
  }
};

 

再看看怎么调用的吧

 

// 分类DIV伸缩
function  FlexClass(box, e) {
  box  =  $(box);
   var  comp  =   - 44 ;
   if  (Math.abs(box.style.height.replace( ' px ' ,  '' ))  <   30 ) {
    comp  =  Math.abs(comp);
    e.className  =   ' jian '
  }  else  {
    e.className  =   ' jian1 '
  }

   var  options  =  {
    cont: box,
    speed:  10 ,
    space: [ 0 ,  10 ],
    wcomp:  0 ,
    hcomp: comp
  };
   new  Flex(options);
}

 

大家可以看到这里的，总改变长宽wcomp与hcomp我们可以动态计算来实现我们的效果，到底是隐藏还是显示，都由我们自己来控制。

 

转载于:https://www.cnblogs.com/ph580/archive/2008/10/20/1314814.html