元素中高的渐变效果

    技术2022-05-11  1

    在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)


    最新回复(0)