JavaScript 弹簧效果

上一篇 / 下一篇 2008-05-17 17:07:18 / 个人分类：转载

上次做图片滑动展示效果时做了减速效果，就想怎么做一个加速效果。就做了下面这个东西，当然只是类似弹簧，而不是真正的弹簧。
原理很简单，用GetStep获取定点之间渐变步长的集合，当减速时从大到小获取，加速反之。
var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; 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 Bounce = Class.create(); Bounce.prototype = { initialize: function(obj, iRange, options) { this.obj = $(obj); this._X = this.X = parseInt(this.obj.style.left) || 0; this._side = -1; this._steps = []; this.Max = this.Range = iRange || 0; this.SetOptions(options); this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Zoom = Math.abs(this.options.Zoom); this.Reduce = !!this.options.Reduce; this.Min = Math.abs(this.options.Min); this.Max = Math.abs(this.options.Max); this.onMin = this.options.onMin; this.onMax = this.options.onMax; this.Start(this.Range); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step: 10,//滑动变化率 Time: 10,//滑动延时 Zoom: 0,//缩放变化率 Reduce: true,//是否缩小 Min: 0,//最小范围 Max: 0,//最大范围 onMin: function(){},//到达最小时函数 onMax: function(){}//到达最大时函数 }; Object.extend(this.options, options || {}); }, // Start: function(iRange) { if(this.Reduce && (iRange<= 0 || iRange <= this.Min)) { this.onMin();return; } if(!this.Reduce && (this.Max >0 && iRange >= this.Max)) { this.onMax();return; } this.Range = iRange; this.obj.style.left = this._X + "px"; this._xs = [this._X + iRange, this._X, this._X - iRange, this._X]; this._side = -1; this.Set(); }, // Set: function() { if(this._xs.length<= 0){ this.Start(this.Zoom >0 ? (this.Reduce ? -1 : 1) * this.Zoom + this.Range : this.Range); return; } this.X = this._xs.shift(); this._steps = GetStep(this.X, parseInt(this.obj.style.left), this.Step) if(this._side > 0) this._steps.reverse(); this._side *= -1; this.Move(); }, // Move: function() { clearTimeout(this._timer); if(this._steps.length<= 0) {this._steps = [0];} var iNow = parseInt(this.obj.style.left), iStep = this._steps.shift(); if (iStep == 0) { this.Set(); } else { this.obj.style.left = (iNow + iStep) + "px"; var This = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } } }; //从大到小 function GetStep(iTarget, iNow, iStep){ var arrStep=[]; iTarget=parseInt(iTarget); iNow=parseInt(iNow); iStep=parseInt(iStep); (function _GetStep(iNow){ var i = (iTarget - iNow) / iStep; if (i == 0) { return; } else if (Math.abs(i) < 1) { i = i >0 ? 1 : -1; } i=parseInt(i) arrStep[arrStep.length]=i; _GetStep(iNow+i); })(iNow) return arrStep; }固定范围反弹：

范围渐变反弹：

自定范围反弹：

范围：
7) clearInterval(t); }, 100); var o2 = new Bounce("idBounce10"); $("bb").onclick = function(){ o2.Start(parseInt($("aa").value) || 200); }
代码：