元素中高的渐变效果

在web 2.0时代里,渐变效果无处不在,元素高的渐变效果也经常可见,下面我写了一个渐变高的js类

原理很简单：就是构造一个定时器，不断改变元素的高度 style.height

代码分以下几步：
1.  变量初始化initialize()
2.  开始执行程序start()
3.  构造一个定时器 run()
4.  设置高度setHeight()
5.  获取步长 getV()
------------------------------------------------------------------

代码如下
var isIE = (document.all) ? true : false;
var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};
if(!isIE){
    HTMLElement.prototype.__defineGetter__("currentStyle", function () {
        return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });
}
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 fadeStruct = function(options){
    this.start = 0;//开始值
    this.end = 0;//结束值
    this.current = 0;//当前值
    Object.extend(this, options || {});
}
/*
渐变高类
author： 选择多灵活多
*/
var eyejsFadeHeight=Class.create();
eyejsFadeHeight.prototype.initialize=function(id){
   this._container=$(id);
   this._time=5; 
   this._show=true;
   this._finish=true;
   this.Step=4;   //步长越大,效果越明显
   this._yBorder = function(){
              return (
                 parseInt($(id).currentStyle.borderTopWidth) + parseInt($(id).currentStyle.borderBottomWidth)
              );
   }
   //在IE下,如果元素无边框时,this._yBorder()会是NaN,而FF是0
   this._borderTBWidth=isNaN(this._yBorder())?0:this._yBorder();
   this._objH=new fadeStruct({start:0,end:$(id).offsetHeight-this._borderTBWidth });
}
eyejsFadeHeight.prototype.start=function(){
   this._show = !this._show;
   if(this._show){ this._objH.current = this._objH.end;}
   else{ this._objH.current = this._objH.start; }
   this.run();
}
eyejsFadeHeight.prototype.run=function(){
   var _oThis=this;
   this._finish = true;
   this.setHeight();
   if(this._finish) return;
   else
      setTimeout(function(){_oThis.run();},_oThis._time);
}
eyejsFadeHeight.prototype.setHeight=function(){
   
    var iGet = this.getV(this._objH, this._container.offsetHeight - this._borderTBWidth);
    if(isNaN(iGet)) return true;
     this._container.style.height = iGet + "px";
    return false;
}
//获取设置值
eyejsFadeHeight.prototype.getV=function(o,nowV){
    /*var vH=(o.current - nowV) / this.Step+nowV;
    if(o.current!=vH)
      this._finish = false;
    return vH;*/
    var iStep = (o.current - nowV) / this.Step;
    if(iStep){       
        this._finish = false;
        if(Math.abs(iStep) < 1){ iStep = iStep > 0 ? 1 : -1; }
        return nowV + iStep;
    }
}
height.rar(1.86 KB)