位置：首页>> 网络编程>> JavaScript>> JavaScript 各种动画渐变效果

JavaScript 各种动画渐变效果

作者：cloudgamer　来源：51js　发布时间：2008-09-02 10:38:00　

标签：渐变,动画,JavaScript

实现了宽度、高度、透明度的渐变，还能以高度宽度中点为中心，还扩展成以任意点为中心渐变（实例中以点击点为中心）。

<!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>

改进了一点

写了个有趣的特效

投稿

JavaScript 各种动画渐变效果

猜你喜欢