实现了宽度、高度、透明度的渐变，还能以高度宽度中点为中心，还扩展成以任意点为中心渐变（实例中以点击点为中心）。
<!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>宽度、高度、透明度的渐变 - 中国asp之家</title> </head> <body> <style type="text/css"> #idContainer{height:410px; width:510px; border:1px solid #000000; position:relative;} .Fade{ position:absolute; top:20px; left:20px; background:#fff; border:5px solid #000099; width:460px; height:360px; } </style> <script type="text/javascript"> var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; 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 Fade = Class.create(); Fade.prototype = { initialize: function(obj, options) { var obj = $(obj); obj.style.overflow = "hidden"; this._obj = obj; this._timer = null;//定时器 this._finish = true;//是否执行完成 this._fun = function(){};//渐变程序 this._opacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; } ; this._targetH = 0;//目标高度 this._targetW = 0;//目标宽度 this._targetO = 0;//目标透明度 var _style = obj.currentStyle || document.defaultView.getComputedStyle(obj, null); this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth); this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth); this.SetOptions(options); this.Mode = this.options.Mode; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.FadeOpacity = !!this.options.FadeOpacity; this.minOpacity = parseInt(this.options.minOpacity); this.maxOpacity = parseInt(this.options.maxOpacity); this.FadeHeight = !!this.options.FadeHeight; this.minHeight = parseInt(this.options.minHeight); this.maxHeight = parseInt(this.options.maxHeight) || this._obj.offsetHeight - this._yBorder; this.posHeight = Math.abs(this.options.posHeight); this.FadeWidth = !!this.options.FadeWidth; this.minWidth = parseInt(this.options.minWidth); this.maxWidth = parseInt(this.options.maxWidth) || this._obj.offsetWidth - this._xBorder; this.posWidth = Math.abs(this.options.posWidth); this.Show = !!this.options.Show; this.Opacity = 100;//透明度 //如果默认是关闭 if(!this.Show){ this.Opacity = 0; } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step:10,//变化率 Time:10,//变化间隔 FadeOpacity:true,//是否透明渐变 minOpacity:0,//最小透明度 maxOpacity:100,//最大透明度 FadeHeight:true,//是否高度渐变 minHeight:0,//最小高度 maxHeight:0,//最大高度 posHeight:0,//变换高度位置 FadeWidth:true,//是否宽度渐变 minWidth:0,//最小宽度 maxWidth:0,//最大宽度 posWidth:0,//变换宽度位置 Mode:"both",//渐变顺序 Show:true//是否默认打开状态 }; Object.extend(this.options, options || {}); }, //触发 Start: function() { clearTimeout(this._timer); //取反表示要设置的状态 this.Show = !this.Show; //根据状态设置目标值 if(this.Show){ this._targetH = this.maxHeight; this._targetW = this.maxWidth; this._targetO = this.maxOpacity; } else{ this._targetH = this.minHeight; this._targetW = this.minWidth; this._targetO = this.minOpacity; } //设置渐变程序 switch (this.Mode.toLowerCase()) { case "width" : this._fun = function(){ this.SetWidth() && this.SetHeight(); //由于分了两步，透明度的步长变成两倍 this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2; } break; case "height" : this._fun = function(){ this.SetHeight() && this.SetWidth(); this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2; } break; case "both" : default : this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); } } //获取变换点位置 if(this.posHeight){ this._y= this._obj.offsetTop + this._obj.offsetHeight * this.posHeight; } if(this.posWidth){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.posWidth; } this.Run(); }, //执行 Run: function() { clearTimeout(this._timer); this._finish = true; //执行渐变 this._fun(); //未完成继续执行 if (!this._finish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); } }, //设置高度渐变 SetHeight: function() { if(this.FadeHeight){ var iHeight = this._obj.offsetHeight - this._yBorder, iStep = this.GetStep(this._targetH, iHeight); if(iStep){ //如果有变换点设置 if(this.posHeight){ this._obj.style.top = this._y - this._obj.offsetHeight * this.posHeight + "px"; } this._obj.style.height = (iHeight + iStep) + "px"; this._finish = false; return false; } } return true; }, //设置宽度渐变 SetWidth: function() { if(this.FadeWidth){ var iWidth = this._obj.offsetWidth - this._xBorder, iStep = this.GetStep(this._targetW, iWidth); if(iStep){ //如果有变换点设置 if(this.posWidth){ this._obj.style.left = this._x - this._obj.offsetWidth * this.posWidth + "px"; } this._obj.style.width = (iWidth + iStep) + "px"; this._finish = false; return false; } } return true; }, //设置透明渐变 SetOpacity: function() { if(this.FadeOpacity){ var iStep = this.GetStep(this._targetO, this.Opacity); if(iStep){ this.Opacity += iStep; //防止透明度出错 if(this.Opacity < 0){ this.Opacity = 0; } else if(this.Opacity > 100){ this.Opacity = 100; } this._opacity(this.Opacity); this._finish = false; return false; } } else{ this._opacity(100); } return true; }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); return iStep; } }; </script> <input id="idBoth" type="button" value="同时伸缩" /> <input id="idMid" type="button" value="居中伸缩" /> <input id="idHeight" type="button" value="高度优先" /> <input id="idWidth" type="button" value="宽度优先" /> <div id="idContainer"> <div id="idFade" class="Fade"></div> </div> <input id="idOpacity" type="button" value="取消透明" /> <input id="idMin" type="button" value="设置最小范围" /> <input id="idWidthF" type="button" value="取消宽度变换" /> <input id="idHeightF" type="button" value="取消高度变换" /> <script type="text/javascript"> var f = new Fade("idFade"); $("idBoth").onclick = function(){ f.Mode = "both"; f.posWidth = f.posHeight = 0; f.Start(); } $("idMid").onclick = function(){ f.posWidth = f.posHeight = .5; f.Start(); } $("idHeight").onclick = function(){ f.Mode = "Height"; f.Start(); } $("idWidth").onclick = function(){ f.Mode = "Width"; f.Start(); } $("idOpacity").onclick = function(){ if(f.FadeOpacity){ f.FadeOpacity = false; this.value = "设置透明"; } else { f.FadeOpacity = true; this.value = "取消透明"; } } $("idMin").onclick = function(){ if(f.minHeight){ f.minHeight = f.minWidth = 0; this.value = "设置最小范围"; } else { f.minHeight = f.minWidth = 100; this.value = "取消最小范围"; } } $("idWidthF").onclick = function(){ if(!f.FadeWidth){ f.FadeWidth = true; this.value = "取消宽度变换"; } else { f.FadeWidth = false; this.value = "设置宽度变换"; } } $("idHeightF").onclick = function(){ if(!f.FadeHeight){ f.FadeHeight = true; this.value = "取消高度变换"; } else { f.FadeHeight = false; this.value = "设置高度变换"; } } function Event(e){ var oEvent = isIE ? window.event : e; if (isIE) { oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft; oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop; oEvent.stopPropagation = function(){ this.cancelBubble = true; }; } return oEvent; } $("idFade").onclick = function(e){ if(f.Show){ e = Event(e); e.stopPropagation(); var o=this, x=o.offsetLeft, y=o.offsetTop; while (o.offsetParent) { o = o.offsetParent; x += o.offsetLeft; y += o.offsetTop; } f.posWidth = (e.pageX - x) / this.offsetWidth; f.posHeight = (e.pageY - y) / this.offsetHeight; f.Start(); } } $("idContainer").onclick = function(e){ if(!f.Show){ f.Start(); } } </script> <div id="aa"></div> </body> </html> [提示：你可先修改部分代码，再按运行]
可以自动运行渐变动画特效：
<!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>自动运行渐变特效 - 中国asp之家</title> </head> <body> <script type="text/javascript"> var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; 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 Fade = Class.create(); Fade.prototype = { initialize: function(obj, options) { var obj = $(obj); obj.style.overflow = "hidden"; this._obj = obj; this._timer = null;//定时器 this._finish = true;//是否执行完成 this._fun = function(){};//渐变程序 this._opacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; } ; this._targetH = 0;//目标高度 this._targetW = 0;//目标宽度 this._targetO = 0;//目标透明度 this._x = this._y = 0;//变换点位置 var _style = obj.currentStyle || document.defaultView.getComputedStyle(obj, null); this._xBorder = parseInt(_style.borderLeftWidth) + parseInt(_style.borderRightWidth); this._yBorder = parseInt(_style.borderTopWidth) + parseInt(_style.borderBottomWidth); this.SetOptions(options); this.Mode = this.options.Mode; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.onFinish = this.options.onFinish; this.FadeOpacity = !!this.options.FadeOpacity; this.minOpacity = parseInt(this.options.minOpacity); this.maxOpacity = parseInt(this.options.maxOpacity); this.FadeHeight = !!this.options.FadeHeight; this.minHeight = parseInt(this.options.minHeight); this.maxHeight = parseInt(this.options.maxHeight) || this._obj.offsetHeight - this._yBorder; this.posHeight = Math.abs(this.options.posHeight); this.FadeWidth = !!this.options.FadeWidth; this.minWidth = parseInt(this.options.minWidth); this.maxWidth = parseInt(this.options.maxWidth) || this._obj.offsetWidth - this._xBorder; this.posWidth = Math.abs(this.options.posWidth); this.Show = !!this.options.Show; this.Opacity = 100;//透明度 //如果默认是关闭 if(!this.Show){ this.Opacity = 0; } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step:10,//变化率 Time:10,//变化间隔 FadeOpacity:true,//是否透明渐变 minOpacity:0,//最小透明度 maxOpacity:100,//最大透明度 FadeHeight:true,//是否高度渐变 minHeight:0,//最小高度 maxHeight:0,//最大高度 posHeight:0,//变换高度位置 FadeWidth:true,//是否宽度渐变 minWidth:0,//最小宽度 maxWidth:0,//最大宽度 posWidth:0,//变换宽度位置 Mode:"both",//渐变顺序 Show:true,//是否默认打开状态 onFinish:function(){}//完成时执行 }; Object.extend(this.options, options || {}); }, //触发 Start: function() { clearTimeout(this._timer); //取反表示要设置的状态 this.Show = !this.Show; //根据状态设置目标值 if(this.Show){ this._targetH = this.maxHeight; this._targetW = this.maxWidth; this._targetO = this.maxOpacity; } else{ this._targetH = this.minHeight; this._targetW = this.minWidth; this._targetO = this.minOpacity; } //设置渐变程序 switch (this.Mode.toLowerCase()) { case "width" : this._fun = function(){ this.SetWidth() && this.SetHeight(); //由于分了两步，透明度的步长变成两倍 this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2; } break; case "height" : this._fun = function(){ this.SetHeight() && this.SetWidth(); this.Step = 2*this.Step; this.SetOpacity(); this.Step = this.Step/2; } break; case "both" : default : this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); } } //获取变换点位置 if(this.posHeight){ this._y = this._obj.offsetTop + this._obj.offsetHeight * this.posHeight; } if(this.posWidth){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.posWidth; } this.Run(); }, //执行 Run: function() { clearTimeout(this._timer); this._finish = true; //执行渐变 this._fun(); //未完成继续执行 if (this._finish) { this.onFinish(); } else { var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, this.Time); } }, //设置高度渐变 SetHeight: function() { if(this.FadeHeight){ var iHeight = this._obj.offsetHeight - this._yBorder, iStep = this.GetStep(this._targetH, iHeight); if(iStep){ //如果有变换点设置 if(this.posHeight){ this._obj.style.top = this._y - this._obj.offsetHeight * this.posHeight + "px"; } this._obj.style.height = (iHeight + iStep) + "px"; this._finish = false; return false; } } return true; }, //设置宽度渐变 SetWidth: function() { if(this.FadeWidth){ var iWidth = this._obj.offsetWidth - this._xBorder, iStep = this.GetStep(this._targetW, iWidth); if(iStep){ //如果有变换点设置 if(this.posWidth){ this._obj.style.left = this._x - this._obj.offsetWidth * this.posWidth + "px"; } this._obj.style.width = (iWidth + iStep) + "px"; this._finish = false; return false; } } return true; }, //设置透明渐变 SetOpacity: function() { if(this.FadeOpacity){ var iStep = this.GetStep(this._targetO, this.Opacity); if(iStep){ this.Opacity += iStep; //防止透明度出错 if(this.Opacity < 0){ this.Opacity = 0; } else if(this.Opacity > 100){ this.Opacity = 100; } this._opacity(this.Opacity); this._finish = false; return false; } } else{ this._opacity(100); } return true; }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); return iStep; } }; </script> <style type="text/css"> .Fade2{ position:absolute; top:20px; left:20px; border:5px solid #000099; width:100px; height:100px; } </style> <div id="idFade2" class="Fade2"></div> <script type="text/javascript"> var f1 = new Fade("idFade2", { posHeight: 1, posWidth: 1, onFinish: function(){ if(!this.Show && this.posHeight && this.posWidth){ this.posHeight = 0; this.posWidth = 1; } else if(this.Show && !this.posHeight && this.posWidth) { this.posHeight = 0; this.posWidth = 1; } else if(!this.Show && !this.posHeight && this.posWidth) { this.posHeight = 0; this.posWidth = 0; } else if(this.Show && !this.posHeight && !this.posWidth) { this.posHeight = 0; this.posWidth = 0; } else if(!this.Show && !this.posHeight && !this.posWidth) { this.posHeight = 1; this.posWidth = 0; } else if(this.Show && this.posHeight && !this.posWidth) { this.posHeight = 1; this.posWidth = 0; } else if(!this.Show && this.posHeight && !this.posWidth) { this.posHeight = 1; this.posWidth = 1; } this.Start(); } } ); f1.Start(); </script> <div id="aa"></div> </body> </html> [提示：你可先修改部分代码，再按运行]
改进了一点
写了个有趣的特效
请稍等，评论加载中...
请稍等，评论加载中...