网站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我们可以动态计算来实现我们的效果，到底是隐藏还是显示，都由我们自己来控制。