伸缩框效果

 

<! 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 > 无标题文档 </ title >
< script  type ="text/javascript" > ...
var $ = function (id) ...{
    return "string" == typeof id ? document.getElementById(id) : id;
};

var $C = function (id) ...{
    return $(id).style;
};

var Class = ...{
  create: function() ...{
    return function() ...{
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) ...{
    for (var property in source) ...{
        destination[property] = source[property];
    }
    return destination;
}

var FlexDiv = Class.create();
FlexDiv.prototype = ...{
  initialize: function(idDiv, options) ...{
    var oDiv = $(idDiv);
    oDiv.style.overflow = "hidden";
    this.oDiv = oDiv;
    this.borderWidth = parseInt(oDiv.style.borderTopWidth) + parseInt(oDiv.style.borderBottomWidth) || 0;
    //边框宽度,但取不了外部css设置的值
    
    this.SetOptions(options);
    
    if(this.options.Show)...{
        this.show = 1;//1显示，-1隐藏
        this.oDiv.style.height = this.options.maxHeight + "px";
    } else ...{
        this.show = -1;
        this.oDiv.style.height = "0px";
    }
    
    this.timer = null;
  },
  //设置默认属性
  SetOptions: function(options) ...{
    this.options = ...{//默认值
      Show:            true,//默认打开状态
      iStep:        1,//每次变化的px量
      iTime:        10,//每隔多久循环一次
      minHeight:    0,//最小高度
      maxHeight:    this.oDiv.offsetHeight - this.borderWidth//最大高度
    };
    Object.extend(this.options, options || ...{});
  },
  //触发
  Flex: function() ...{
    clearTimeout(this.timer); this.show *= -1; this.SetFlex();
  },
  //执行
  SetFlex: function() ...{
    var iHeight = this.oDiv.offsetHeight - this.borderWidth, op = this.options;
    if ((this.show > 0 && iHeight < op.maxHeight) || (this.show < 0 && iHeight > op.minHeight)) ...{
        iHeight += this.show * op.iStep;
        this.oDiv.style.height = ((iHeight > 0) ? iHeight : 0) + "px";
        var oFlex = this;
        this.timer = setTimeout(function()...{ oFlex.SetFlex(); }, op.iTime);
    }
  }
};
</ script >
</ head >

< body >
< script  type ="text/javascript" > ...
var Flex, Flex1;
window.onload = function()...{ Flex = new FlexDiv("divFlex"); Flex1 = new FlexDiv("divFlex1",...{Show : false}); }
</ script >
< input  name =""  type ="button"  value ="伸缩效果"  onclick ="Flex.Flex();Flex1.Flex()"   />
< div  id ="divFlex"  style ="border:solid 1px;" >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
</ div >
< div  id ="divFlex1"  style ="border:solid 1px;" >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
< p > 内容 </ p >
</ div >
</ body >
</ html >

 

 伸缩框效果