|
|
原帖
http://bbs.blueidea.com/thread-2883702-1-2.html
实例和程序说明看这里
http://www.cnblogs.com/cloudgamer/archive/2008/08/27/1277131.html
JavaScript 弹簧效果
渐变效果的原理就是利用定时器不断设置值，如果要减速效果就设置一个步长（详细看JavaScript 弹簧效果）
http://www.cnblogs.com/cloudgamer/archive/2008/05/17/1201386.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>JavaScript 渐变效果</title></head><body><script type="text/javascript">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.run = false;//是否渐变this.start = 0;//开始值this.end = 0;//结束值this.target = 0;//目标值Object.extend(this, options || {});}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._x = this._y = 0;//变换点位置//设置获取透明度程序this._setOpacity = isIE ? function(opacity){ obj.style.filter = "alpha(opacity:" + opacity + ")"; } : function(opacity){ obj.style.opacity = opacity / 100; };this._getOpacity = isIE ? function(){ return parseInt(obj.filters["alpha"].opacity); } : function(opacity){ return 100 * parseFloat(obj.currentStyle.opacity); };//获取边框宽度程序this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); }this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }this.SetOptions(options);this.Mode = this.options.Mode;this.Time = Math.abs(this.options.Time);this.onFinish = this.options.onFinish;//先设置特殊默认值this.Opacity = new FadeStruct({ end: 100 });this.Top = new FadeStruct({ start: this._obj.offsetTop, end: this._obj.offsetTop });this.Left = new FadeStruct({ start: this._obj.offsetLeft, end: this._obj.offsetLeft });this.Height = new FadeStruct({ end: this._obj.offsetHeight - this._yBorder() });this.Width = new FadeStruct({ end: this._obj.offsetWidth - this._xBorder() });//再设置用户默认值Object.extend(this.Opacity, this.options.Opacity);Object.extend(this.Top, this.options.Top);Object.extend(this.Left, this.options.Left);Object.extend(this.Height, this.options.Height);Object.extend(this.Width, this.options.Width);//变换位置参数this.Height.pos = Number(this.options.Height.pos);this.Width.pos = Number(this.options.Width.pos);//设置成默认状态this.Show = !this.options.Show;this.Step = 1;this.Start();//重新设置Stepthis.Step = Math.abs(this.options.Step); }, //设置默认属性 SetOptions: function(options) {this.options = {//默认值Opacity:{},//透明渐变参数Height:{},//高度渐变参数Width:{},//宽度渐变参数Top:{},//Top渐变参数Left:{},//Left渐变参数Step:10,//变化率Time:10,//变化间隔Mode:"both",//渐变顺序Show:false,//是否默认打开状态onFinish:function(){}//完成时执行};Object.extend(this.options, options || {}); }, //触发 Start: function() {clearTimeout(this._timer);//取反表示要设置的状态this.Show = !this.Show;//为避免透明度为null值，需要先设置一次透明度if(this.Opacity.run){ this._setOpacity(this.Show ? this.Opacity.start : this.Opacity.end); }//根据状态设置目标值if(this.Show){this.Opacity.target = this.Opacity.end;this.Top.target = this.Top.end;this.Left.target = this.Left.end;this.Height.target = this.Height.end;this.Width.target = this.Width.end;} else{this.Opacity.target = this.Opacity.start;this.Top.target = this.Top.start;this.Left.target = this.Left.start;this.Height.target = this.Height.start;this.Width.target = this.Width.start;}//设置渐变程序switch (this.Mode.toLowerCase()) {case "width" :this._fun = function(){this.SetWidth() && this.SetHeight();//由于分了两步，下面的步长变成两倍this.Step = 2*this.Step;this.SetOpacity(); this.SetTop(); this.SetLeft();this.Step = this.Step/2;}break;case "height" :this._fun = function(){this.SetHeight() && this.SetWidth();//由于分了两步，下面的步长变成两倍this.Step = 2*this.Step;this.SetOpacity(); this.SetTop(); this.SetLeft();this.Step = this.Step/2;}break;case "both" :default :this._fun = function(){ this.SetHeight(); this.SetWidth(); this.SetOpacity(); this.SetTop(); this.SetLeft();}}//获取变换点位置//由于设置变换点后与top和left变换有冲突只能执行其一if(this.Height.pos){ this._y = this._obj.offsetTop + this._obj.offsetHeight * this.Height.pos; this.Top.run = false; }if(this.Width.pos){ this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos; this.Left.run = false; }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() {var iGet = this.Get(this.Height, this._obj.offsetHeight - this._yBorder());if(isNaN(iGet)) return true;this._obj.style.height = iGet + "px";//如果有变换点设置if(this.Height.pos){ this._obj.style.top = this._y - this._obj.offsetHeight * this.Height.pos + "px"; }return false; }, //设置宽度渐变 SetWidth: function() {var iGet = this.Get(this.Width, this._obj.offsetWidth - this._xBorder());if(isNaN(iGet)) return true;this._obj.style.width = iGet + "px";if(this.Width.pos){ this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px"; }return false; }, //设置top渐变 SetTop: function() {var iGet = this.Get(this.Top, this._obj.offsetTop);if(isNaN(iGet)) return true;this._obj.style.top = iGet + "px";return false; }, //设置left渐变 SetLeft: function() {var iGet = this.Get(this.Left, this._obj.offsetLeft);if(isNaN(iGet)) return true;this._obj.style.left = iGet + "px";return false; }, //设置透明渐变 SetOpacity: function() {var iGet = this.Get(this.Opacity, this._getOpacity());if(isNaN(iGet)) return true;this._setOpacity(iGet);return false; }, //获取设置值 Get: function(o, now){if(o.run){var iStep = (o.target - now) / this.Step;if(iStep){this._finish = false;if(Math.abs(iStep) < 1){ iStep = iStep > 0 ? 1 : -1; }return now + iStep;}} }};</script><style type="text/css">.Container{height:450px; width:600px;position:relative; background:#FFFFFF;}.Fade{position:absolute;top:10px;left:50px;border:5px solid #000099;width:460px;height:360px;background:#FFFFFF url(http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg) left top;}</style><input id="idBoth" type="button" value="同时伸缩" /><input id="idHeight" type="button" value="高度优先" /><input id="idWidth" type="button" value="宽度优先" /><div id="idContainer" class="Container"><div id="idFade" class="Fade"></div></div><input id="idOpacity" type="button" value="取消透明" /><input id="idMin" type="button" value="设置最小范围" /><script type="text/javascript">var f = new Fade("idFade", { Show: true,Opacity: { run: true },Height: { run: true },Width: { run: true, pos: .5 },Top: { run: true, end: 70 }});$("idBoth").onclick = function(){f.Mode = "both";f.Start();}$("idHeight").onclick = function(){f.Mode = "Height";f.Start();}$("idWidth").onclick = function(){f.Mode = "Width";f.Start();}$("idOpacity").onclick = function(){if(f.Opacity.run){f.Opacity.run = false;f._setOpacity(100);this.value = "设置透明";} else {f.Opacity.run = true;this.value = "取消透明";}}$("idMin").onclick = function(){if(f.Height.start){f.Height.start = f.Width.start = 0;this.value = "设置最小范围";} else {f.Height.start = f.Width.start = 100;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;}$("idContainer").onclick = function(e){if(f.Show){e = Event(e);e.stopPropagation();var o = $("idFade"), x = o.offsetLeft, y = o.offsetTop;while (o.offsetParent) { o = o.offsetParent; x += o.offsetLeft; y += o.offsetTop; }f.Width.pos = (e.pageX - x) / $("idFade").offsetWidth;f.Height.pos = (e.pageY - y) / $("idFade").offsetHeight;}f.Start();}</script></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡